ziermach-blog/src/app/pages/resume/resume.component.html

<div class="wrapper">
  <app-default-page-header></app-default-page-header>
  <div class="main">
    <div class="section section-transparent profile-content">
      <div class="container">
        <div class="owner">
          <div class="avatar">
            <img
              src="/assets/img/avatar/profilbild.jpg"
              alt="Circle Image"
              class="img-circle img-no-padding img-responsive"
            />
            <a href="/assets/pdf/ZIERMACH.pdf" class="btn btn-primary" download="ZIERMACH.pdf">
              Download
            </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">
                    Auszubildender Fachinformatiker Anwendungsentwicklung
                    (Trainee for 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></th>
                  <th></th>
                  <th>Focus</th>
                  <th>Graduation</th>
                </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>
                  <td>
                    IT specialist application development
                    <br />
                    (ger. Fachinformatiker/-in Anwendungsentwicklung)
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </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="4"
                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">
                    Send Message
                  </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>