doctype html
html(lang = 'de')
  head
    title Portfolio
    meta(charset = 'utf-8')
    meta(name = 'viewport', content = 'width=device-width, initial-scale=1')
    link(rel = 'stylesheet', href = 'styles/bulma.min.css')
    link(rel = 'stylesheet', href = 'styles/screen.css')
  body
    //-https://iconoir.com/
    section.hero.is-fullheight
      .hero-body
        div.container
          .hero-text
            h1.title
              | Vorname Nachname
            p.subtitle
              | Titel
      .hero-foot
        div.container
          a(href = '#content')
            .svg-icon.svg-arrow-down
              include images/nav-arrow-down.svg
    section.section#content
      .container
        .columns
          .column.content.is-5
            h2 Projekt 1
            p.
              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
              libero non pellentesque.
            ul 
              li Vivamus quam arcu, dictum quis hendrerit eget
              li Lobortis eu felis. Nulla felis velit
              li Ornare ac porttitor ut, rhoncus eu ipsum.
            div
              a.button(href = 'https://www.example.com')
                span Zur Website
                span.icon
                  include images/open-new-window.svg
          .column.is-7
            figure.image
              img.image-screenshot(src = 'images/portfolio.png')
    section.section
      .container
        .columns
          .column.content.is-5
            h2 Projekt 2
            p.
              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
              libero non pellentesque.
            ul 
              li Vivamus quam arcu, dictum quis hendrerit eget
              li Lobortis eu felis. Nulla felis velit
              li Ornare ac porttitor ut, rhoncus eu ipsum.
            div
              a.button(href = 'https://www.example.com')
                span Zur Website
                span.icon
                  include images/open-new-window.svg
          .column.is-7
            figure.image
              img.image-screenshot(src = 'images/portfolio.png')
    section.section
      .container
        .columns
          .column.content.is-5
            h2 Projekt 3
            p.
              Proin tincidunt enim in felis aliquet, a ultricies purus bibendum.
              Quisque in ultrices lectus. Nulla at urna diam. Proin sodales
              lobortis libero eu facilisis. In sem urna, aliquam vel consectetur
              sit amet, pulvinar sit amet lectus. Quisque molestie dapibus
              libero non pellentesque.
            ul 
              li Vivamus quam arcu, dictum quis hendrerit eget
              li Lobortis eu felis. Nulla felis velit
              li Ornare ac porttitor ut, rhoncus eu ipsum.
            div
              a.button(href = 'https://www.example.com')
                span Zur Website
                span.icon
                  include images/open-new-window.svg
          .column.is-7
            figure.image
              img.image-screenshot(src = 'images/portfolio.png')
    footer.footer
      .container.content
        p Hintergrundbild von XY über unsplash.com
        p
          | https://unsplash.com/de/fotos/eine-nahaufnahme-einer-computertastatur-mit-verschwommenem-hintergrund-s1nDVsVgDVQ
