Current File : /home/digitaw/teste_ecarte/yacinecamara/index.html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Yacine CAMARA</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta content="Free Website Template" name="keywords">
    <meta content="Free Website Template" name="description">

    <!-- Favicon -->
    <link href="img/logo.png" rel="icon">

    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap"
        rel="stylesheet">

    <!-- CSS Libraries -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
    <link href="lib/animate/animate.min.css" rel="stylesheet">
    <link href="lib/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="lib/lightbox/css/lightbox.min.css" rel="stylesheet">

    <!-- Template Stylesheet -->
    <link href="css/style.css" rel="stylesheet">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="51">
    <!-- Nav Bar Start -->
    <div class="navbar navbar-expand-lg bg-light navbar-light" >
        <div class="container-fluid rounded" style="background-color: white;">
            <a href="index.html" class="navbar-brand"><img src="img/logo.png" width="100%" height="100%" alt=""></a>
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse justify-content-between" id="navbarCollapse">
                <div class="navbar-nav ml-auto">
                    <a style="color:black;" href="#home" class="nav-item nav-link active">Accueil</a>
                    <a style="color:black;" href="#about" class="nav-item nav-link">A propos</a>
                    <a style="color:black;" href="#service" class="nav-item nav-link">Compétences</a>
                    <a style="color:black;" href="#experience" class="nav-item nav-link">Expériences</a>
                    <a style="color:black;" href="#portfolio" class="nav-item nav-link">Réalisation</a>
                    <a style="color:black;" href="#price" class="nav-item nav-link">Services</a>
                    <a style="color:black;" href="#contact" class="nav-item nav-link">Contact</a>
                </div>
            </div>
        </div>
    </div>
    <!-- Nav Bar End -->


    <!-- Hero Start -->
    <div class="hero" id="home">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-sm-12 col-md-6">
                    <div class="hero-content">
                        <div class="hero-text">
                            <p>Salut, moi c'est</p>
                            <h1>Yacine CAMARA</h1>
                            <h2></h2>
                            <div class="typed-text">Développeuse Web et mobile, spécialiste en digitalisation et maintenance de la chaîne de production, Géographe, Géomaticienne</div>
                        </div>
                        <div class="hero-btn">
                            <!-- <a class="btn" href="">Hire Me</a> -->
                            <a class="btn" href="#contact">Contact</a>
                        </div>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 d-none d-md-block">
                    <div class="hero-image">
                        <img src="img/yacine.png" width="80%" alt="Hero Image">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Hero End -->


    <!-- About Start -->
    <div class="about wow fadeInUp" data-wow-delay="0.1s" id="about">
        <div class="container-fluid">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about-img">
                        <img src="img/yaccine.png" style="width: 80%;" alt="Image">

                    </div>
                </div>
                <div class="col-lg-6 shadow pb-5 pt-5">
                    <div class="about-content">
                        <div class="section-header text-left">
                            <p>A propos</p>
                            <h2>05 ans d'expériences</h2>
                        </div>
                        <div class="about-text">
                            <p>
                                Enthousiaste et polyvalente, je suis Yacine Camara, une développeuse web et 
                                mobile passionnée par l'intersection entre la technologie et la géomatique. 
                                Avec une expertise avérée en digitalisation et maintenance de la chaîne de production,
                                 j'ai eu le privilège de travailler en tant que développeuse 
                                d'application web et mobile ainsi que responsable administrative de projet digitaux chez Digitalis SN.
                            </p>
                        </div>
                        <!-- <div class="skills">
                            <div class="skill-name">
                                <p>Web Design</p>
                                <p>85%</p>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                                    aria-valuemax="100"></div>
                            </div>
                            <div class="skill-name">
                                <p>Web Development</p>
                                <p>95%</p>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="95" aria-valuemin="0"
                                    aria-valuemax="100"></div>
                            </div>
                            <div class="skill-name">
                                <p>Apps Design</p>
                                <p>90%</p>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0"
                                    aria-valuemax="100"></div>
                            </div>
                            <div class="skill-name">
                                <p>Apps Development</p>
                                <p>85%</p>
                            </div>
                            <div class="progress">
                                <div class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0"
                                    aria-valuemax="100"></div>
                            </div>
                        </div> -->
                        <a class="btn" href="">Savoir plus</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- About End -->


    <!-- Service Start -->
    <div class="service shadow p-3" id="service">
        <div class="container">
            <div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
                <p>Ce que je sais faire</p>
                <h2>Compétences</h2>
            </div>
            <div class="row">
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.0s">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-desktop" aria-hidden="true"></i>
                        </div>
                        <div class="service-text">
                            <h3>Développement Web et Mobile </h3> 
                        </div>
                    </div>
                    
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-text-width" aria-hidden="true"></i>
                        </div>
                        <div class="service-text">
                            <h3>Contenus Textuels, Multimédias et Web</h3> 
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-globe" aria-hidden="true"></i>
                        </div>
                        <div class="service-text">
                            <h3>Géomatique et Cartographie</h3> 
                        </div>
                    </div>
                    
                </div>
                <div class="col-lg-6 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="service-item">
                        <div class="service-icon">
                            <i class="fa fa-crosshairs"></i>
                        </div>
                        <div class="service-text">
                            <h3>Méthodologie de Travail et Collaboration :</h3> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Service End -->


    <!-- Experience Start -->
    <div class="experience" id="experience">
        <div class="container">
            <header class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
                <p>Mon parcours</p>
                <h2>Mes Expériences</h2>
            </header>
            <div class="timeline">
                <div class="timeline-item left wow slideInLeft" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">Décembre 2022 à présent </div>
                        <h2>Développeuse d'application web et mobile et
                            Responsable administrative des projets digitaux</h2>
                        <h4>Digitalis-sn</h4> 
                    </div>
                </div>
                <div class="timeline-item right wow slideInRight" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">Octobre 2020 - Juillet 2021

                        </div>
                        <h2> Digitalisation et Maintenance de la Chaîne de Production</h2>
                        <h4> Simplon</h4> 
                    </div>
                </div>
                <div class="timeline-item left wow slideInLeft" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date"> Novembre 2018 - Février 2019</div>
                        <h2>Stage</h2>
                        <h4>Cadastre Tambacounda</h4> 
                    </div>
                </div>
                <div class="timeline-item right wow slideInRight" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">Mai - Juin 2018</div>
                        <h2>Stage: Gestion des Ordures Ménagères</h2> 
                            <h4> UCG (Unité de Coordination de la Gestion des Déchets Solides)</h4>
                    </div>
                </div>
                <!-- <div class="timeline-item right wow slideInRight" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">2045 - 2050</div>
                        <h2>Web Developer</h2>
                        <h4>Soft Agency, San Francisco, CA</h4>
                        <p>
                            Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit
                            semper pretium.
                        </p>
                    </div>
                </div>
                <div class="timeline-item left wow slideInLeft" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">2045 - 2050</div>
                        <h2>Web Developer</h2>
                        <h4>Soft Agency, San Francisco, CA</h4>
                        <p>
                            Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit
                            semper pretium.
                        </p>
                    </div>
                </div>
                <div class="timeline-item right wow slideInRight" data-wow-delay="0.1s">
                    <div class="timeline-text">
                        <div class="timeline-date">2045 - 2050</div>
                        <h2>Web Developer</h2>
                        <h4>Soft Agency, San Francisco, CA</h4>
                        <p>
                            Lorem ipsum dolor sit amet elit. Aliquam odio dolor, id luctus erat sagittis non. Ut blandit
                            semper pretium.
                        </p>
                    </div>
                </div> -->
            </div>
        </div>
    </div>
    <!-- Job Experience End -->


    <!-- Banner Start -->
        <!-- <div class="banner wow zoomIn" data-wow-delay="0.1s">
            <div class="container">
                <div class="section-header text-center">
                    <p>Reasonable Price</p>
                    <h2>Get A <span>Special</span> Price</h2>
                </div>
                <div class="container banner-text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur
                        facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra
                        quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                    </p>
                    <a class="btn">Pricing Plan</a>
                </div>
            </div>
        </div> -->
    <!-- Banner End -->


     <!-- Portfolio Start -->
     <div class="portfolio" id="portfolio">
        <div class="container">
            <div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
                <p>Mes réalisations</p>
                <h2>Réalisations</h2>
            </div>
            <div class="row">
                <div class="col-12">
                    <ul id="portfolio-filter">
                        <li data-filter="*" class="filter-active">All</li>
                        <li data-filter=".filter-1">Site web</li>
                        <li data-filter=".filter-2">site e-commerce</li>
                        <!-- <li data-filter=".filter-3">mobile</li> -->
                    </ul>
                </div>
            </div>
            <div class="row portfolio-container">
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-1 wow fadeInUp" data-wow-delay="0.0s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/africagames.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Africa games Festival</h3>
                            <a class="btn" href="img/africagames.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-1 wow fadeInUp" data-wow-delay="0.0s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/toptours.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Top Tours Sénégal</h3>
                            <a class="btn" href="img/toptours.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-2 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/senboutique .png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Sen boutique culturelle</h3>
                            <a class="btn" href="img/senboutique .png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-2 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/coragro.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Coragro</h3>
                            <a class="btn" href="img/coragro.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-2 wow fadeInUp" data-wow-delay="0.2s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/fanamed.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Fana medical Service</h3>
                            <a class="btn" href="img/fanamed.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-1 wow fadeInUp" data-wow-delay="0.4s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/fadel.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Faadel Business Company</h3>
                            <a class="btn" href="img/fadel.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-1 wow fadeInUp" data-wow-delay="0.6s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/senstrategie.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>Sen Stratégie</h3>
                            <a class="btn" href="img/senstrategie.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6 col-sm-12 portfolio-item filter-2 wow fadeInUp" data-wow-delay="0.8s">
                    <div class="portfolio-wrap">
                        <div class="portfolio-img">
                            <img src="img/jayymusic.png" alt="Image">
                        </div>
                        <div class="portfolio-text">
                            <h3>jayy music</h3>
                            <a class="btn" href="img/jayymusic.png" data-lightbox="portfolio">+</a>
                        </div>
                    </div>
                </div>
              
            </div>
        </div>
    </div>
     <!-- Banner Start -->
     <div class="banner wow zoomIn" data-wow-delay="0.1s">
        <div class="container">
            <div class="section-header text-center">
                <h2>Vidéo présentation</h2>
            </div>
            <div class="container banner-text">
                <video controls width="800">
                    <source src="/media/cc0-videos/flower.webm" type="video/webm" />
                  
                    <source src="/media/cc0-videos/flower.mp4" type="video/mp4" />
                  
                    Download the
                    <a href="/media/cc0-videos/flower.webm">WEBM</a>
                    or
                    <a href="/media/cc0-videos/flower.mp4">MP4</a>
                    video.
                  </video>
                </div>
        </div>
    </div>
    <!-- Banner End -->
    <!-- Portfolio End -->

    <!-- Banner Start -->
        <!-- <div class="banner wow zoomIn" data-wow-delay="0.1s">
            <div class="container">
                <div class="section-header text-center">
                    <p>Awesome Discount</p>
                    <h2>Get <span>30%</span> Discount</h2>
                </div>
                <div class="container banner-text">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec pretium mi. Curabitur
                        facilisis ornare velit non vulputate. Aliquam metus tortor, auctor id gravida condimentum, viverra
                        quis sem. Curabitur non nisl nec nisi scelerisque maximus.
                    </p>
                    <a class="btn">Order Now</a>
                </div>
            </div>
        </div> -->
    <!-- Banner End -->


    <!-- Price Start -->
    <div class="price" id="price">
        <div class="container">
            <div class="section-header text-center wow zoomIn" data-wow-delay="0.1s">
                <p>Pricing Plan</p>
                <h2>Services</h2>
            </div>
            <div class="row">
                <div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="price-item shadow-sm">
                        <div class="price-header"> 
                            <img src="img/site web.png" width="300" alt="" srcset="">
                            <div class="price-prices">
                                <hr>
                                <h3> Conception web & mobile</h3>
                            </div>
                        </div> 
                        <div class="price-footer">
                            <div class="price-action">
                                <a class="btn" target="_blank" href="https://www.digitalis.digitalis-sn.com/developpement-dapplication-web-et-mobile/">Voir maintenant</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeInUp" data-wow-delay="0.0s">
                    <div class="price-item featured-item">
                        <div class="price-header"> 
                            <img src="img/design.png" width="300" alt="" srcset="">
                            <div class="price-prices">
                                <hr>
                                <h3> Création graphique</h3>
                            </div>
                        </div> 
                        <div class="price-footer">
                            <div class="price-action">
                                <a class="btn" target="_blank" href="https://www.digitalis.digitalis-sn.com/creation-graphique/">Voir maintenant</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 wow fadeInUp" data-wow-delay="0.5s">
                    <div class="price-item shadow-sm">
                        <div class="price-header"> 
                            <img src="img/marketing.png" width="300" alt="" srcset="">
                            <div class="price-prices">
                                <hr>
                                <h3> Web Marketing</h3>
                            </div>
                        </div> 
                        <div class="price-footer">
                            <div class="price-action">
                                <a class="btn" target="_blank" href="https://www.digitalis.digitalis-sn.com/web-marketing/">Voir maintenant</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Price End -->


    <!-- Contact Start -->
    <div class="contact wow fadeInUp" data-wow-delay="0.1s" id="contact">
        
        <div class="container-fluid">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-md-4"></div>
                    <div class="col-md-8">
                        <div class="contact-form">
                            <div id="success"></div>
                            <form name="sentMessage" id="contactForm" novalidate="novalidate">
                                <div class="control-group">
                                    <input type="text" class="form-control" id="name" placeholder="Your Name"
                                        required="required" data-validation-required-message="Please enter your name" />
                                    <p class="help-block"></p>
                                </div>
                                <div class="control-group">
                                    <input type="email" class="form-control" id="email" placeholder="Your Email"
                                        required="required"
                                        data-validation-required-message="Please enter your email" />
                                    <p class="help-block"></p>
                                </div>
                                <div class="control-group">
                                    <input type="text" class="form-control" id="subject" placeholder="Subject"
                                        required="required" data-validation-required-message="Please enter a subject" />
                                    <p class="help-block"></p>
                                </div>
                                <div class="control-group">
                                    <textarea class="form-control" id="message" placeholder="Message"
                                        required="required"
                                        data-validation-required-message="Please enter your message"></textarea>
                                    <p class="help-block"></p>
                                </div>
                                <div>
                                    <button class="btn" type="submit" id="sendMessageButton">Envoyer</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Contact End -->




    <!-- Team Start -->
    <div class="team" id="team">

    </div>
    <!-- Team End -->






    <!-- Footer Start -->
    <div class="footer wow fadeIn" data-wow-delay="0.3s">
        <div class="container-fluid">
            <div class="container">
                <div class="footer-info">
                    <h2>Yacine CAMARA</h2>
                    <h3>Thiaroye  Azur, Dakar, Sénégal  </h3>
                    <div class="footer-menu">
                        <p>+221 77 254 66 63</p>
                        <p> yacinecamara@digitalis-sn.com </p>
                    </div>
                    <div class="footer-social">
                        <a target="_blank" href="https://twitter.com/Digitalis_sn"><i class="fab fa-twitter"></i></a>
                        <a target="_blank" href="https://www.facebook.com/DigitalisSn/?_&_rdc=2&_rdr"><i class="fab fa-facebook-f"></i></a>
                        <a target="_blank" href="https://www.youtube.com/channel/UCRwi-xNNTxDRvO6OEJ8avPA"><i class="fab fa-youtube"></i></a>
                        <a target="_blank" href="https://www.instagram.com/digitalis_sn/?hl=fr"><i class="fab fa-instagram"></i></a>
                        <a target="_blank" href="https://twitter.com/Digitalis_sn"><i class="fab fa-linkedin-in"></i></a>
                    </div>
                </div>
            </div>
            <div class="container copyright">
                <p>&copy; All Right Reserved |

                    <!--/*** This template is free as long as you keep the footer author’s credit link/attribution link/backlink. If you'd like to use the template without the footer author’s credit link/attribution link/backlink, you can purchase the Credit Removal License from "https://htmlcodex.com/credit-removal". Thank you for your support. ***/-->
                    Développer et Désigner par <a target="_blank" href="https://digitalis-sn.com">DIGITALIS SN</a>
                </p>
            </div>
        </div>
    </div>
    <!-- Footer End -->


    <!-- Back to top button -->
    <a href="#" class="btn back-to-top"><i class="fa fa-chevron-up"></i></a>


    <!-- Pre Loader -->
    <div id="loader" class="show">
        <div class="loader"></div>
    </div>


    <!-- JavaScript Libraries -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
    <script src="lib/easing/easing.min.js"></script>
    <script src="lib/wow/wow.min.js"></script>
    <script src="lib/waypoints/waypoints.min.js"></script>
    <script src="lib/typed/typed.min.js"></script>
    <script src="lib/owlcarousel/owl.carousel.min.js"></script>
    <script src="lib/isotope/isotope.pkgd.min.js"></script>
    <script src="lib/lightbox/js/lightbox.min.js"></script>

    <!-- Contact Javascript File -->
    <script src="mail/jqBootstrapValidation.min.js"></script>
    <script src="mail/contact.js"></script>

    <!-- Template Javascript -->
    <script src="js/main.js"></script>
</body>

</html>