Initial commit: Erika CV site with Nomad deployment

.gitea/workflows/deploy.yml

@@ -0,0 +1,96 @@
+name: Build and Deploy Erika CV
+
+on:
+  push:
+    branches:
+      - main
+  workflow_dispatch:
+
+jobs:
+  build-and-deploy:
+    runs-on: debian-host
+
+    env:
+      PATH: /usr/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/sbin:/bin:/snap/bin
+      DOCKER_HOST: unix:///var/run/docker.sock
+      BUILDX_CONFIG: /tmp/buildx
+
+    steps:
+    - name: Checkout code
+      uses: actions/checkout@v4
+
+    - name: System info
+      run: |
+        uname -a
+        whoami
+
+    - name: Set up Docker Context for Buildx
+      id: buildx-context
+      run: |
+        export DOCKER_HOST=tcp://docker:2376/
+        export DOCKER_TLS_VERIFY=0
+        docker context rm builders || true
+        docker context create builders
+
+    - name: Verify Docker
+      run: docker --version
+
+    - name: Set up Docker Buildx
+      uses: docker/setup-buildx-action@v3
+      env:
+        PATH: /usr/bin:/usr/local/bin:/bin:/sbin:/usr/sbin
+
+    - name: Log in to Harbor Registry
+      run: |
+        echo "${{ secrets.HARBOR_ROBOT_TOKEN }}" | docker login registry.i80.dk -u "robot\$gitserver" --password-stdin
+      env:
+        PATH: /usr/bin:/usr/local/bin:/bin:/sbin:/usr/sbin
+
+    - name: Build and push Docker image
+      uses: docker/build-push-action@v5
+      env:
+        PATH: /usr/bin:/usr/local/bin:/bin:/sbin:/usr/sbin
+      with:
+        context: .
+        file: ./Dockerfile
+        push: true
+        tags: |
+          registry.i80.dk/gitea/web-erika:latest
+          registry.i80.dk/gitea/web-erika:${{ github.sha }}
+        build-args: |
+          BUILD_VERSION=${{ github.ref_name }}-${{ github.sha }}
+          GIT_COMMIT=${{ github.sha }}
+          BUILD_TIME=${{ github.event.head_commit.timestamp }}
+
+    - name: Validate Nomad job
+      run: |
+        echo "Validating Nomad job..."
+        nomad job validate erika.nomad
+      env:
+        NOMAD_ADDR: "https://nomad.i80.dk:4646"
+
+    - name: Deploy to Nomad
+      run: |
+        echo "Deploying to Nomad..."
+        nomad job run erika.nomad
+      env:
+        NOMAD_ADDR: "https://nomad.i80.dk:4646"
+
+    - name: Wait for deployment
+      run: |
+        sleep 10
+        nomad job status web-erika
+        nomad job allocs web-erika
+      env:
+        NOMAD_ADDR: "https://nomad.i80.dk:4646"
+
+    - name: Health check
+      run: |
+        sleep 20
+        curl -f https://erika.i80.dk/health || echo "Not yet available"
+
+    - name: Notify deployment status
+      run: |
+        echo "Deployment complete"
+        echo "Site: https://erika.i80.dk"
+        echo "Health: https://erika.i80.dk/health"

Dockerfile

@@ -0,0 +1,29 @@
+FROM python:3.12-slim
+
+ARG BUILD_VERSION=unknown
+ARG BUILD_TIME=unknown
+ARG GIT_COMMIT=unknown
+
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    FLASK_APP=app.py \
+    FLASK_ENV=production \
+    BUILD_VERSION=${BUILD_VERSION} \
+    BUILD_TIME=${BUILD_TIME} \
+    GIT_COMMIT=${GIT_COMMIT}
+
+WORKDIR /app
+
+RUN pip install --upgrade --no-cache-dir pip
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+ENV PORT=5000 \
+    HOST=0.0.0.0
+
+EXPOSE 5000
+
+CMD ["sh", "-c", "gunicorn --bind ${HOST}:${PORT} --workers 2 --timeout 60 app:app"]

app.py

@@ -0,0 +1,25 @@
+from flask import Flask, render_template, jsonify
+from datetime import datetime, timezone
+import os
+
+app = Flask(__name__)
+
+BUILD_VERSION = os.getenv('BUILD_VERSION', 'unknown')
+GIT_COMMIT = os.getenv('GIT_COMMIT', 'unknown')
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/health')
+def health():
+    return jsonify({
+        'status': 'healthy',
+        'timestamp': datetime.now(timezone.utc).isoformat(),
+        'version': BUILD_VERSION,
+        'commit': GIT_COMMIT[:7] if GIT_COMMIT != 'unknown' else 'unknown'
+    })
+
+if __name__ == '__main__':
+    port = int(os.getenv('PORT', 5000))
+    app.run(host='0.0.0.0', port=port)

erika.nomad

@@ -0,0 +1,95 @@
+job "web-erika" {
+  region      = "global"
+  datacenters = ["dc1"]
+  type        = "service"
+
+  meta {
+    uuid        = uuidv4()
+    deployed_at = "[[ timeNowUTC ]]"
+  }
+
+  update {
+    stagger            = "30s"
+    max_parallel       = 1
+    canary             = 1
+    min_healthy_time   = "10s"
+    healthy_deadline   = "5m"
+    auto_revert        = true
+    auto_promote       = true
+    progress_deadline  = "10m"
+  }
+
+  group "web" {
+    count = 1
+
+    network {
+      port "http" {}
+    }
+
+    reschedule {
+      attempts       = 5
+      interval       = "10m"
+      delay          = "30s"
+      delay_function = "exponential"
+      max_delay      = "120s"
+      unlimited      = false
+    }
+
+    service {
+      provider = "consul"
+      name     = "erika"
+      port     = "http"
+
+      tags = [
+        "traefik.enable=true",
+        "traefik.http.routers.erika.rule=Host(`erika.i80.dk`)",
+        "traefik.http.routers.erika.tls=true"
+      ]
+
+      canary_tags = [
+        "traefik.enable=false"
+      ]
+
+      check {
+        name     = "http_health_check"
+        type     = "http"
+        path     = "/health"
+        interval = "10s"
+        timeout  = "5s"
+
+        check_restart {
+          limit = 3
+          grace = "10s"
+        }
+      }
+    }
+
+    task "web" {
+      driver = "docker"
+
+      config {
+        image      = "registry.i80.dk/gitea/web-erika:latest"
+        ports      = ["http"]
+        force_pull = true
+      }
+
+      restart {
+        attempts = 10
+        interval = "10m"
+        delay    = "10s"
+        mode     = "fail"
+      }
+
+      env {
+        APP_ENV = "production"
+        PORT    = "${NOMAD_PORT_http}"
+        HOST    = "0.0.0.0"
+      }
+
+      resources {
+        cpu    = 100
+        memory = 128
+      }
+    }
+  }
+}

requirements.txt

@@ -0,0 +1,2 @@
+flask>=3.0.0
+gunicorn>=22.0.0

templates/index.html

@@ -0,0 +1,572 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Erika Stensvedny - CV</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    :root {
+      --sidebar-bg:   #1e2d4a;
+      --sidebar-text: #c8d6ed;
+      --accent:       #4a8fe8;
+      --accent-light: #d6e6ff;
+      --white:        #ffffff;
+      --body-bg:      #f0f4fa;
+      --text-dark:    #1e2d4a;
+      --text-muted:   #7a8caa;
+      --border:       #dce6f5;
+      --tag-bg:       #e8f0fc;
+    }
+
+    body {
+      font-family: 'Inter', sans-serif;
+      background: var(--body-bg);
+      color: var(--text-dark);
+      min-height: 100vh;
+      display: flex;
+      align-items: flex-start;
+      justify-content: center;
+      padding: 40px 20px;
+    }
+
+    .cv-wrapper {
+      width: 100%;
+      max-width: 960px;
+      background: var(--white);
+      border-radius: 16px;
+      overflow: hidden;
+      box-shadow: 0 20px 60px rgba(30, 45, 74, 0.18);
+      display: flex;
+    }
+
+    /* ---- SIDEBAR ---- */
+    .sidebar {
+      width: 280px;
+      min-width: 280px;
+      background: var(--sidebar-bg);
+      color: var(--sidebar-text);
+      padding: 40px 28px;
+      display: flex;
+      flex-direction: column;
+      gap: 32px;
+    }
+
+    .avatar-wrap {
+      display: flex;
+      justify-content: center;
+    }
+
+    .avatar {
+      width: 120px;
+      height: 120px;
+      border-radius: 50%;
+      border: 4px solid var(--accent);
+      overflow: hidden;
+      background: #2e4270;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .avatar-initials {
+      font-size: 36px;
+      font-weight: 700;
+      color: var(--accent);
+      letter-spacing: 2px;
+    }
+
+    .sidebar-name {
+      text-align: center;
+    }
+
+    .sidebar-name h1 {
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--white);
+      line-height: 1.3;
+    }
+
+    .sidebar-name p {
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--accent);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 1.2px;
+    }
+
+    .sidebar-section h3 {
+      font-size: 11px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 1.5px;
+      color: var(--accent);
+      border-bottom: 1px solid rgba(74, 143, 232, 0.3);
+      padding-bottom: 8px;
+      margin-bottom: 14px;
+    }
+
+    .contact-list {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .contact-list li {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      font-size: 13px;
+      line-height: 1.4;
+    }
+
+    .contact-icon {
+      width: 18px;
+      height: 18px;
+      flex-shrink: 0;
+      margin-top: 1px;
+      opacity: 0.75;
+    }
+
+    .profile-text {
+      font-size: 13px;
+      line-height: 1.7;
+      color: var(--sidebar-text);
+    }
+
+    .skill-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    .skill-tag {
+      background: rgba(74, 143, 232, 0.15);
+      border: 1px solid rgba(74, 143, 232, 0.3);
+      color: var(--accent-light);
+      font-size: 12px;
+      font-weight: 500;
+      padding: 4px 12px;
+      border-radius: 20px;
+    }
+
+    /* ---- MAIN CONTENT ---- */
+    .main {
+      flex: 1;
+      padding: 40px 36px;
+      display: flex;
+      flex-direction: column;
+      gap: 36px;
+      min-width: 0;
+    }
+
+    .section-title {
+      font-size: 13px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 2px;
+      color: var(--accent);
+      border-left: 3px solid var(--accent);
+      padding-left: 12px;
+      margin-bottom: 20px;
+    }
+
+    /* Timeline */
+    .timeline {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .timeline-item {
+      display: flex;
+      gap: 20px;
+      padding-bottom: 24px;
+      position: relative;
+    }
+
+    .timeline-item:last-child {
+      padding-bottom: 0;
+    }
+
+    .timeline-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-shrink: 0;
+      width: 12px;
+    }
+
+    .timeline-dot {
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background: var(--accent);
+      flex-shrink: 0;
+      margin-top: 4px;
+      box-shadow: 0 0 0 3px rgba(74, 143, 232, 0.2);
+    }
+
+    .timeline-line {
+      width: 2px;
+      flex: 1;
+      background: var(--border);
+      margin-top: 6px;
+    }
+
+    .timeline-item:last-child .timeline-line {
+      display: none;
+    }
+
+    .timeline-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .timeline-period {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      margin-bottom: 4px;
+    }
+
+    .timeline-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--text-dark);
+      line-height: 1.3;
+    }
+
+    .timeline-subtitle {
+      font-size: 12px;
+      color: var(--accent);
+      font-weight: 500;
+      margin-top: 2px;
+      margin-bottom: 8px;
+    }
+
+    .timeline-bullets {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+
+    .timeline-bullets li {
+      font-size: 13px;
+      color: #4a5568;
+      line-height: 1.5;
+      padding-left: 14px;
+      position: relative;
+    }
+
+    .timeline-bullets li::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 8px;
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      background: var(--accent);
+      opacity: 0.6;
+    }
+
+    /* Education cards */
+    .edu-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+
+    .edu-card {
+      background: var(--body-bg);
+      border-left: 3px solid var(--accent);
+      border-radius: 0 8px 8px 0;
+      padding: 14px 16px;
+    }
+
+    .edu-period {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.8px;
+      margin-bottom: 4px;
+    }
+
+    .edu-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--text-dark);
+    }
+
+    .edu-place {
+      font-size: 12px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    /* Language bars */
+    .lang-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    .lang-item label {
+      display: flex;
+      justify-content: space-between;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--text-dark);
+      margin-bottom: 6px;
+    }
+
+    .lang-item .level {
+      font-weight: 400;
+      font-size: 11px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+    }
+
+    .lang-bar-track {
+      height: 5px;
+      background: var(--border);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    .lang-bar-fill {
+      height: 100%;
+      background: var(--accent);
+      border-radius: 10px;
+      transition: width 1s ease;
+    }
+
+    /* Print */
+    @media print {
+      body { background: white; padding: 0; }
+      .cv-wrapper { box-shadow: none; border-radius: 0; max-width: 100%; }
+      .sidebar { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+    }
+
+    /* Mobile */
+    @media (max-width: 700px) {
+      .cv-wrapper { flex-direction: column; }
+      .sidebar { width: 100%; min-width: 0; }
+      .lang-grid { grid-template-columns: 1fr; }
+    }
+  </style>
+</head>
+<body>
+<div class="cv-wrapper">
+
+  <!-- SIDEBAR -->
+  <aside class="sidebar">
+    <div class="avatar-wrap">
+      <div class="avatar">
+        <img src="/static/photo.jpg" alt="Erika Stensvedny"
+             onerror="this.style.display='none'; this.nextElementSibling.style.display='flex'">
+        <div class="avatar-initials" style="display:none">ES</div>
+      </div>
+    </div>
+
+    <div class="sidebar-name">
+      <h1>Erika Stensvedny</h1>
+      <p>Serviceminded &amp; engageret</p>
+    </div>
+
+    <div class="sidebar-section">
+      <h3>Kontakt</h3>
+      <ul class="contact-list">
+        <li>
+          <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
+            <path d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
+            <path d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
+          </svg>
+          <span>Skovstræde 3, Vordingborg</span>
+        </li>
+        <li>
+          <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
+            <path d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498A1 1 0 0121 15.72V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
+          </svg>
+          <span>+45 30 84 97 73</span>
+        </li>
+        <li>
+          <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
+            <path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
+          </svg>
+          <span>erikastensvedny@gmail.com</span>
+        </li>
+        <li>
+          <svg class="contact-icon" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
+            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"/>
+            <line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/>
+            <line x1="3" y1="10" x2="21" y2="10"/>
+          </svg>
+          <span>11 januar 2008</span>
+        </li>
+      </ul>
+    </div>
+
+    <div class="sidebar-section">
+      <h3>Faglig Profil</h3>
+      <p class="profile-text">
+        Jeg er kommunikativ, nem at omgås og kan tilpasse mig enhver situation.
+        Jeg søger et job, hvor jeg kan bidrage med mit engagement og mit store
+        arbejdsdrive. I mine tidligere job har jeg altid udmærket mig ved at
+        være produktiv og lære hurtigt.
+      </p>
+    </div>
+
+    <div class="sidebar-section">
+      <h3>Kompetencer</h3>
+      <div class="skill-tags">
+        <span class="skill-tag">Problemlosning</span>
+        <span class="skill-tag">Empatisk</span>
+        <span class="skill-tag">Fejlfinding</span>
+        <span class="skill-tag">Serviceminded</span>
+        <span class="skill-tag">Initiativrig</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- MAIN -->
+  <main class="main">
+
+    <!-- ERHVERVSERFARING -->
+    <section>
+      <div class="section-title">Erhvervserfaring</div>
+      <div class="timeline">
+
+        <div class="timeline-item">
+          <div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content">
+            <div class="timeline-period">Marts 2026 - April 2026</div>
+            <div class="timeline-title">Tjener - Restaurant Kujirasushi</div>
+            <div class="timeline-subtitle">Vordingborg</div>
+            <ul class="timeline-bullets">
+              <li>Koordinerede med køkkenpersonalet for at sikre hurtig og præcis levering af retter</li>
+              <li>Assisterede i daglig opsætning og oprydning af restaurantens borde og serviceområder</li>
+              <li>Serverede mad og drikkevarer til gæster, hvilket sikrede en høj grad af kundetilfredshed</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-item">
+          <div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content">
+            <div class="timeline-period">April 2026 - April 2026</div>
+            <div class="timeline-title">Praktikant - Egmont</div>
+            <div class="timeline-subtitle">København</div>
+            <ul class="timeline-bullets">
+              <li>Udvikling af hjemmeside</li>
+              <li>Test af AI-løsninger</li>
+              <li>Deltagelse i udviklingsmøder</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-item">
+          <div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content">
+            <div class="timeline-period">Januar 2025 - Februar 2026</div>
+            <div class="timeline-title">Privat Rengøring</div>
+            <div class="timeline-subtitle">Vordingborg / Stensved / Kalvehave</div>
+            <ul class="timeline-bullets">
+              <li>Rengøring i private hjem</li>
+              <li>Effektiv udførelse af tildelte opgaver</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-item">
+          <div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content">
+            <div class="timeline-period">Januar 2025 - Maj 2025</div>
+            <div class="timeline-title">Rengøringshjælp - Møllers Grill</div>
+            <div class="timeline-subtitle">Vordingborg</div>
+            <ul class="timeline-bullets">
+              <li>Planlagde og udførte rengøringsopgaver i henhold til en detaljeret tidsplan</li>
+              <li>Effektiv udførelse af tildelte opgaver</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="timeline-item">
+          <div class="timeline-left"><div class="timeline-dot"></div><div class="timeline-line"></div></div>
+          <div class="timeline-content">
+            <div class="timeline-period">Oktober 2024 - Oktober 2024</div>
+            <div class="timeline-title">Praktikant - Vordingborg Madservice</div>
+            <div class="timeline-subtitle">Nyråd</div>
+            <ul class="timeline-bullets">
+              <li>Lavede mad til ældre borgere</li>
+              <li>Rengøring af køkken</li>
+            </ul>
+          </div>
+        </div>
+
+      </div>
+    </section>
+
+    <!-- UDDANNELSE -->
+    <section>
+      <div class="section-title">Uddannelse</div>
+      <div class="edu-grid">
+        <div class="edu-card">
+          <div class="edu-period">August 2025 - Juni 2027</div>
+          <div class="edu-title">Hf-eksamen</div>
+          <div class="edu-place">Hf, Vordingborg</div>
+        </div>
+        <div class="edu-card">
+          <div class="edu-period">August 2023 - Juni 2024</div>
+          <div class="edu-title">10. klasse-eksamen</div>
+          <div class="edu-place">10. klasse, Næsved</div>
+        </div>
+        <div class="edu-card">
+          <div class="edu-period">August 2023 - Juni 2024</div>
+          <div class="edu-title">9. klasse-eksamen</div>
+          <div class="edu-place">9. klasse Efterskole, Glamsbjerg</div>
+        </div>
+      </div>
+    </section>
+
+    <!-- SPROG -->
+    <section>
+      <div class="section-title">Sprog</div>
+      <div class="lang-grid">
+        <div class="lang-item">
+          <label>Dansk <span class="level">Modersmål</span></label>
+          <div class="lang-bar-track"><div class="lang-bar-fill" style="width:100%"></div></div>
+        </div>
+        <div class="lang-item">
+          <label>Engelsk <span class="level">Højere mellemniveau</span></label>
+          <div class="lang-bar-track"><div class="lang-bar-fill" style="width:68%"></div></div>
+        </div>
+        <div class="lang-item">
+          <label>Tysk <span class="level">Basisniveau</span></label>
+          <div class="lang-bar-track"><div class="lang-bar-fill" style="width:30%"></div></div>
+        </div>
+      </div>
+    </section>
+
+  </main>
+</div>
+</body>
+</html>