<div class="wrapper">
<app-default-page-header></app-default-page-header>
<div class="main">
<div class="section section-image section-profile-content">
<div class="container">
<div class="owner">
<div class="avatar">
<a
href="/assets/pdf/ZIERMACH.pdf"
class="btn btn-primary"
download="ZIERMACH.pdf"
>
Download PDF
</a>
</div>
<div class="name">
<h4 class="title">Christian Ziermann</h4>
<h6 class="description">Web Developer</h6>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="personal">
<h4 class="title">Personal</h4>
<div class="description">
<table class="table table">
<tr *ngFor="let personalColumn of displayedPersonalColumns">
<th>{{ personalColumn | uppercase }}</th>
<td>
{{
personalColumn == "birthdate"
? (personalData[personalColumn]
| date: "dd. MMMM yyyy")
: personalData[personalColumn]
}}
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-6">
<div class="personal">
<h4 class="title">Jobs</h4>
<table class="description table">
<tr>
<td class="job-date">
July 2018 - Today
</td>
<td class="job-company">
<a href="https://www.plusserver.com/">PlusServer</a>
</td>
<td class="job-postion description">
Web-Developer
</td>
</tr>
<tr>
<td class="job-date">
August 2015 - July 2018
</td>
<td class="job-company">
<a href="https://www.plusserver.com/">PlusServer</a>
</td>
<td class="job-postion description">
Trainee application development
</td>
</tr>
</table>
</div>
</div>
<div class="col-md-12">
<div class="personal">
<h4 class="title">Education</h4>
<table class="description table ta table-borderless">
<tr>
<th>Date</th>
<th>School</th>
<th>Graduation</th>
</tr>
<tr></tr>
<tr class="job-date">
<td>
August 2015 - July 2018
</td>
<td>
<a href="https://www.gso-koeln.de/">
Georg-Simon-Ohm-Berufskolleg Köln
</a>
</td>
<td>
IT specialist application development
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="section section-transparent"></div>
<div class="section section-image section-experience">
<div class="container">
<div class="row">
<h1 class="title text-center col-md-12">
Experience & Interests
</h1>
<div class="col-md-12">
<div class="row">
<h2 class="col-sm-12 title text-center">
IT-Skills
</h2>
</div>
<div class="row">
<div
*ngFor="let skill of skills"
class="text-center skill col-sm-3"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
</div>
<div class="text-center">
{{ skill.name }}
</div>
<div class="text-center">
<i class="{{ getStarClass(skill.starCount, 0) }}"></i>
<i class="{{ getStarClass(skill.starCount, 1) }}"></i>
<i class="{{ getStarClass(skill.starCount, 2) }}"></i>
<i class="{{ getStarClass(skill.starCount, 3) }}"></i>
<i class="{{ getStarClass(skill.starCount, 4) }}"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-transparent"></div>
<div class="section section-image section-soft-skills">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="row">
<h2 class="col-sm-12 title text-center">
Soft Skills
</h2>
</div>
<div class="row">
<div
*ngFor="let skill of softSkills"
class="text-center skill col-sm-6"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
</div>
<div class="text-center">
{{ skill.name }}
</div>
<div class="text-center">
<i class="{{ getStarClass(skill.starCount, 0) }}"></i>
<i class="{{ getStarClass(skill.starCount, 1) }}"></i>
<i class="{{ getStarClass(skill.starCount, 2) }}"></i>
<i class="{{ getStarClass(skill.starCount, 3) }}"></i>
<i class="{{ getStarClass(skill.starCount, 4) }}"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<h2 class="col-sm-12 title text-center">
Languages
</h2>
</div>
<div class="row">
<div
*ngFor="let skill of languages"
class="text-center skill col-sm-6"
>
<div class="text-center skill-logo">
<div [innerHTML]="skill.iconHtml"></div>
</div>
<div class="text-center">
{{ skill.name }}
</div>
<div class="text-center">
<i class="{{ getStarClass(skill.starCount, 0) }}"></i>
<i class="{{ getStarClass(skill.starCount, 1) }}"></i>
<i class="{{ getStarClass(skill.starCount, 2) }}"></i>
<i class="{{ getStarClass(skill.starCount, 3) }}"></i>
<i class="{{ getStarClass(skill.starCount, 4) }}"></i>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12">
<div class="row">
<h2 class="col-sm-12 title text-center">
Like to Learn
</h2>
</div>
<div class="row">
<div class="text-center skill col-sm-3">
<div class="text-center skill-logo">
<i class="fas fa-microchip"></i>
</div>
<div class="text-center">
IoT
</div>
</div>
<div class="text-center skill col-sm-3">
<div class="text-center skill-logo">
<i class="fas fa-cogs"></i>
</div>
<div class="text-center">
Deep Learning
</div>
</div>
<div class="text-center skill col-sm-3">
<div class="text-center skill-logo">
<i class="fas fa-gamepad"></i>
</div>
<div class="text-center">
Game Development
</div>
</div>
<div class="text-center skill col-sm-3">
<div class="text-center skill-logo">
<i class="fab fa-vuejs"></i>
</div>
<div class="text-center">
Vuejs
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h2 class="title text-center">
My Stuff
</h2>
</div>
<div class="col-md-6 text-center">
<div class="info">
<div class="icon icon-danger">
<i class="fas fa-gamepad"></i>
</div>
<div class="description">
<h4 class="info-title">Games</h4>
<p class="description">
some small Games i made with some friends.
</p>
<a [routerLink]="['/games']" class="btn btn-link btn-danger"
>See more</a
>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="info">
<div class="icon icon-danger">
<i class="fas fa-code"></i>
</div>
<div class="description">
<h4 class="info-title">Projects</h4>
<p>from simple Script to bigger Web-Projects.</p>
<a [routerLink]="['/projects']" class="btn btn-link btn-danger"
>See more</a
>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="section section-transparent">
<div class="container">
<div class="row">
<div class="col-md-8 mr-auto ml-auto">
<h2 class="text-center">Keep in touch?</h2>
<form class="contact-form">
<div class="row">
<div class="col-md-6">
<label>Name</label>
<div
class="input-group"
[ngClass]="{ 'input-group-focus': focus === true }"
>
<div class="input-group-prepend">
<span class="input-group-text"
><i class="nc-icon nc-single-02"></i
></span>
</div>
<input
type="text"
class="form-control"
placeholder="Name"
(focus)="focus = true"
(blur)="focus = false"
/>
</div>
</div>
<div class="col-md-6">
<label>Email</label>
<div
class="input-group"
[ngClass]="{ 'input-group-focus': focus1 === true }"
>
<div class="input-group-prepend">
<span class="input-group-text">
<i class="nc-icon nc-email-85"></i
></span>
</div>
<input
type="text"
class="form-control"
placeholder="Email"
(focus)="focus1 = true"
(blur)="focus1 = false"
/>
</div>
</div>
</div>
<label>Message</label>
<textarea
class="form-control"
rows="6"
placeholder="Tell us your thoughts and feelings..."
></textarea>
<div class="row">
<div class="col-md-4 mr-auto ml-auto">
<button class="btn btn-danger btn-lg btn-fill" disabled>
Send Message
</button>
</div>
</div>
<div class="row text-center">
<div class="col-md-5 mr-auto ml-auto">
<a
class="btn btn-warning btn-lg btn-fill"
href="mailto:cziermann@mailbox.org"
>cziermann@mailbox.org</a
>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>