{% extends "base.html" %}

{% load static %}

{% block title %} Papa Abdou Mbodji - Developer and Data Engineer {% endblock %}


{% block content %}

<!-- Header -->
<section
  style="height: 45vh !important;background: url('{% static 'img/b2.jpg' %}');background-position: bottom;background-size: cover;"
  class="   is-fullheight-with-navbar bgprimary portEntete  ">


  </div>
  <div class="hero-body is-flex is-flex-direction-column is-justify-content-end m-0 p-0  ">

    <br><br><br><br>
    <div class="container"><span style="color: #e28d40;text-align: center;display: block;">Hello! I am</span>
      <h3 style="color: white;" class="title is-1 is-size-2-mobile has-text-centered">
        Papa Abdou Mbodji
      </h3>
      <h4 style="color: aliceblue;" class="subtitle is-6 has-text-centered ">
        Developer and Data Engineer<br>
      </h4>
    </div>
  </div>
</section>


<!-- About -->
<section class="section" id="about">


  <div class="columns has-same-height is-gapless">

    <div class="column">
      <!-- Profile picture -->
      <div style="width: 300px;margin-left: auto;margin-right: auto;border-radius: 25px;" class="card mt-3">
        <div class="card-image">
          <figure class="image is-256x256">
            <img style="border-radius: 25px;" src="{% static 'img/profile.jpg' %}" alt="profile de douCoder ">
          </figure>
        </div>
      </div>
    </div>

    <div class="column is-flex is-flex-direction-column is-justify-content-center">
      <h3 style="font-family: Righteous; font-weight: 900 ;margin-top: 7%;color: #0c3444 !important;"
        class="title is-2 has-text-left mb-2">A propos</h3>
      <h4 class="subtitle is-5 has-text-centered"></h4>
      <div class="container">
        <p style="font-weight:300;font-weight: 400; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;"
          class="has-text-left description"><strong> Scientifique de formation</strong>,
          passionné par la technologie numérique et conscient de son impact, j'ai tracé mon chemin vers une
          spécialisation approfondie en <b style="color: #0d575c;">Big Data</b> et en <b
            style="color: #0d575c;">Intelligence Artificielle</b> après avoir accumulé deux années d'expériences
          professionnelles en <b style="color: #0d575c;">programmation</b>. Fort de cette solide base, je me
          suis engagé à développer des compétences de pointe dans le <b style="color: #0d575c;">Développement
            d'Applications et la Data Science</b>. Mon objectif quotidien est de mettre en œuvre ces compétences pour
          offrir des solutions exceptionnelles.
        </p>
      </div>
    </div>


</section>

<!-- Skills tags -->

<section id="comp" style="background-position: center;background-size: cover;" class="p-0 bgprimary py-5">

  <h3 style="color: white;font-family: Righteous;font-weight: 400;z-index: 999 !important;"
    class="title is-2 has-text-centered ">Competences</h3>
  <div class="columns m-3">

    <div class="column">

      <!-- Skills -->
      <div class="card">
        <div class="card-content skills-content">

          <div class="content">
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>JavaScript & jQuery</strong>
                    <br>
                    <progress class="progress  is-success  is-small" value="85" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Java & Spring</strong>
                    <br>
                    <progress class="progress is-primary is-small" value="80" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Python & Django</strong>
                    <br>
                    <progress class="progress is-primary is-small" value="70" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Python + FastApi</strong>
                    <br>
                    <progress class="progress is-primary is-small" value="70" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong> PHP & Laravel</strong>
                    <br>
                    <progress class="progress is-success is-small" value="85" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>HTML5/CSS3 & Bulma</strong>
                    <br>
                    <progress class="progress is-success is-small" value="95" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Angular & TypeScript</strong>
                    <br>
                    <progress class="progress is-success is-small" value="70" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>SQL</strong>
                    <br>
                    <progress class="progress is-primary is-small" value="80" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>
          </div>
        </div>
      </div>
    </div>


    <div class="column">
      <div class="card">
        <div class="card-content skills-content">

          <div class="content">
            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>ETL & Data pipelines</strong>
                    <br>
                    <progress class="progress  is-warning  is-small" value="60" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <div class="content">
              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>Dart & Flutter</strong>
                      <br>
                      <progress class="progress  is-warning  is-small" value="50" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>CMS Wordpress</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="90" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>Git</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="80" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>Architecture monolithique</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="87" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>
              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>Architecture microservice</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="80" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>ReactJS</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="70" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>

              <article class="media">
                <div class="media-content">
                  <div class="content">
                    <p>
                      <strong>React Native</strong>
                      <br>
                      <progress class="progress is-primary is-small" value="70" max="100"></progress>
                    </p>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="card">
        <div class="card-content skills-content">

          <div class="content">

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Domino Datalab</strong>
                    <br>
                    <progress class="progress is-warning is-small" value="50" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Cloud AWS</strong>
                    <br>
                    <progress class="progress is-warning is-small" value="60" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Docker</strong>
                    <br>
                    <progress class="progress is-warning is-small" value="70" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Heroku</strong>
                    <br>
                    <progress class="progress is-primary is-small" value="65" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Cloudflare</strong>
                    <br>
                    <progress class="progress is-warning is-small" value="50" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>

            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Cpanel</strong>
                    <br>
                    <progress class="progress  is-primary  is-small" value="75" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>



            <article class="media">
              <div class="media-content">
                <div class="content">
                  <p>
                    <strong>Réseaux</strong>
                    <br>
                    <progress class="progress is-warning is-small" value="60" max="100"></progress>
                  </p>
                </div>
              </div>
            </article>





          </div>
        </div>
      </div>
    </div>
  </div>




  </div>
</section>

<!--Contact-->
{% comment %}
{% include 'partials/contact.html' %} {% endcomment %}



{% endblock content %}