{{- define "main" -}}
<div class=" d-flex flex-column col-lg-4 min-vh-100" style="box-shadow: 0 4px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); background-color: #4472C4;color: white;">
    <img class="portait my-5 mx-auto " style="border-radius: 50%;  max-width: 200px;  display: block;box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 4px rgba(0,0,0,0.24); border:6px solid white;" alt="Portrait" src="/img/avatar.jpeg" />
    <a class="text-decoration-none text-white" href="https://www.linkedin.com/in/xxx/"><i class="bi bi-linkedin"></i> John Doe</a>
    <p></p>
    <h3>About me</h3>
    <p>Donec et eros nunc. Etiam laoreet facilisis lacus, et dictum neque malesuada sit amet. Vestibulum vitae viverra lacus. Etiam risus dolor, placerat quis enim eget, dictum placerat nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi eu lacinia mauris. Pellentesque faucibus vestibulum turpis quis pellentesque.</p>
    <p>Suspendisse varius quis sapien sed tincidunt. Cras tempor metus eget tellus varius rutrum. Phasellus et sodales tellus.</p>
    <p>Aenean sem risus, tincidunt vitae dapibus quis, iaculis et est.</p>
    <br>
    <h3>Competences</h3>
    <ul>
        <li>Microsoft Biztalk</li>
        <li>.Net, C#, WCF</li>
        <li>Microsoft SQL</li>
        <li>SAP Cloud Integration</li>
        <li>XML, XSLT, XPath, XQuery</li>
        <li>Git, Jira</li>
    </ul>
    <br>
    <h3>Languages</h3>
    <ul>
        <li>French, mother tongue</li>
        <li>English, Professional</li>
    </ul>
    <br>
    <h3>Center of Interest</h3>
    <ul>
        <li>Friends</li>
        <li>Travel</li>
        <li>Rugby</li>
        <li>Aviation and Planes</li>
        <li>Spatial Discoveries</li>
    </ul>
</div>

<div class="col-lg-8 mx-0 px-0 ">
    <div class="pt-5 pb-3 px-5" style = "background-color: #e6e6e4;">
        <h2 class="text-black">John <span class="text-uppercase" style="color:#4472C4">Doe</span></h2>
        <p>My Title / Profession</p>
        <ul class="list-unstyled">
            <li><i class="bi bi-envelope"></i> <a href="mailto:john.doe@somegmail.com">john.doe@somegmail.com</a></li>
            <li><i class="bi bi-telephone"></i> +1 23 456 7890</li>
            <li><i class="bi bi-pin-map-fill"></i> some address</li>
          </ul>
    </div>
    <div class="d-flex flex-column container px-5 py-4 shadow-sm min-vh-100">
        <h3>Professional Experiences</h3>
            <p>
            <strong>Since Month Year : Company (Country)</strong>
            <br>
            Position / title
            </p>
          <ul class="experience-list">
            <li>Responsabilities</li>
            <li>Activity 1</li>
            <li>Activity 2</li>
            <li>Activity 3</li>
            <li>Activity 4</li>
            <li>Activity 5</li>
            <li>Technologies : Tech1. Tech2, Tech3</li>
          </ul>

          <p>
            <strong>Month Year <i class="bi bi-arrow-right"></i> Month Year :  Company (Country)</strong>
            <br>
            Position / Title
          </p>
          <ul class="experience-list">
            <li>Responsabilities</li>
            <li>Activity 1</li>
            <li>Activity 2</li>
            <li>Activity 3</li>
            <li>Activity 4</li>
            <li>Activity 5</li>
            <li>Technologies : Tech1. Tech2, Tech3</li>
          </ul>

          <p>
            <strong>Month Year <i class="bi bi-arrow-right"></i> Month Year :  Company (Country)</strong>
            <br>
            Position / Title
          </p>
          <ul class="experience-list">
            <li>Responsabilities</li>
            <li>Activity 1</li>
            <li>Activity 2</li>
            <li>Activity 3</li>
            <li>Activity 4</li>
            <li>Activity 5</li>
            <li>Technologies : Tech1. Tech2, Tech3</li>
          </ul>

        <h3>Studies and formations</h3>

          <p>
            <strong>Year <i class="bi bi-arrow-right"></i>  Year</strong>
            <br>
            <em>Graduation, Diploma ...</em>, University, City, Country
          </p>
          <p>
            <strong>Year <i class="bi bi-arrow-right"></i>  Year</strong>
            <br>
            <em>Graduation, Diploma ...</em>, University, City, Country
          </p>
    </div>
</div>



{{- end -}}