cv_de.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="format-detection" content="telephone=no">

    <!--========== BOX ICONS ==========-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">

    <!--========== CSS ==========-->
    <link rel="stylesheet" href="assets/css/cv-style-de.css">

    <title>CV | Deutsch</title>
</head>

<body>
    <!--========== HEADER ==========-->
    <header class="l-header" id="header">
        <nav class="nav bd-container">
            <a href="de" class="nav__logo">Urbain</a>

            <div class="nav__menu" id="nav-menu">
                <ul class="nav__list">

                    <li class="nav__item">
                        <a href="#home" class="nav__link active-link">
                            <i class='bx bx-home nav__icon'></i>Home
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#skills" class="nav__link">
                            <i class='bx bx-receipt nav__icon'></i>Softskills
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#profile" class="nav__link">
                            <i class='bx bx-user nav__icon'></i>Profil
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#experience" class="nav__link">
                            <i class='bx bx-book nav__icon'></i>Bildung
                        </a>
                    </li>
        

                    <li class="nav__item">
                        <a href="#experience" class="nav__link">
                            <i class='bx bx-briefcase-alt nav__icon'></i>Erfahrung
                        </a>
                    </li>

                    <li class="nav__item">
                        <a href="#langues" class="nav__link">
                            <i class='bx bx-award nav__icon'></i>Sprachen
                        </a>
                    </li>
                </ul>
            </div>

            <div class="nav__toggle" id="nav-toggle">
                <i class='bx bx-grid-alt'></i>
            </div>
        </nav>
    </header>

    <main class=" l-main bd-container">
        <!-- All elements within this div, is generated in PDF -->
        <div class="resume" id="area-cv">
            <div class="resume__left">
                <!--========== HOME ==========-->
                <section class="home" id="home">
                    <div class="home__container section bd-grid">
                        <div class="home__data bd-grid">
                            <img src="assets/img/cv.png" alt="" class="home__img">

                            <h1 class="home__title">URBAIN LUCAS</h1>
                            <h3 class="home__profession">Webentwickler</h3>

                            <div>
                                <a download="" href="assets/pdf/CV_URBAIN_LUCAS_DE.pdf" class="home__button-movil">Lebenslauf herunterladen</a>
                            </div>
                        </div>

                        <div class="home__adress bd-grid">
                            <span class="home__information">
                                <i class='bx bx-map home__icon'></i> Vosges, Frankreich
                            </span>
                            <span class="home__information">
                                <i class='bx bx-car home__icon'></i>Führerschein-Führerschein
                            </span>
                            <span class="home__information">
                                <i class='bx bx-envelope home__icon'></i>lucasurbain68@protonmail.ch
                            </span>
                            <span class="home__information">
                                <i class='bx bx-phone home__icon'></i>+33 (0)6 19 95 34 78
                            </span>
                        </div>
                    </div>


                    <!-- Theme change button -->
                    <i class='bx bx-moon change-theme' title="Theme" id="theme-button"></i>

                    <!-- Button to generate and download the pdf. Available for desktop. -->
                    <i class='bx bx-download generate-pdf' title="Generate PDF" id="resume-button"></i>
                </section>

                <!--========== SOFT SKILL ==========-->
                <section class="skills" id="skills">
                    <h2 class="section-title">Softskills</h2>

                    <p class="skills__description">
                        <b> • Neugier :</b> Ich bin eine neugierige Person, die gerne ständig neue Dinge entdeckt.
                    </p>
                    <p class="skills__description">
                        <b> • Flexibilität :</b> Ich bin jemand, der sich schnell und einfach an eine neue Umgebung anpasst.
                    </p>
                    <p class="skills__description">
                        <b> • Planung :</b> Da ich sehr diszipliniert bin, organisiere ich mich und antizipiere die Dinge unabhängig.
                    </p>
                </section>

                <!--========== PROFILE ==========-->
                <section class="profile section" id="profile">
                    <h2 class="section-title">Profil</h2>

                    <p class="profile__description">
                        <b> • Fachgebiete : </b> IT-Projektmanagement, Etablierung einer Geschäftsstrategie, Benutzererfahrung, Design, benutzerfreundliches Produkt, Neugier und Technologieuhr.
                    </p>
                    <p class="profile__description">
                        <b> •  Natürliches Ergebnis :</b> Die Erwartungen von Gästen und Mitarbeitern übertreffen und gleichzeitig die Leistung des Endergebnisses liefern und übertreffen... jedes Mal.
                    </p>
                </section>

                <!--========== SOCIAL ==========-->
                <section class="social">
                    <div class="social__container bd-grid">
                        <a href="https://www.linkedin.com/in/lucasurbain/" target="_blank" class="social__link">
                            <i class='bx bxl-linkedin-square social__icon'></i> @lucasurbain
                        </a>
                        <a href="https://instagram.com/lucasurbain" target="_blank" class="social__link">
                            <i class='bx bxl-instagram social__icon'></i> @lucasurbain
                        </a>
                        <a href="https://github.com/lucasurbain" target="_blank" class="social__link">
                            <i class='bx bxl-github social__icon'></i> @lucasurbain
                        </a>
                    </div>
                </section>

            </div>

            <div class="resume__right">
                <!--========== RECENT WORK ==========-->
                    <section class="introduction">
                        <p>Mit Leidenschaft für Informatik und mit solider Erfahrung in der Softwareentwicklung bin ich bereit, meine Fähigkeiten in den Dienst Ihres Unternehmens zu stellen, um technologische Herausforderungen zu meistern und Ihre Ziele zu erreichen.</p>
                    </section>
                <!--========== COMPÉTENCES ==========-->
                <section class="">
                    <h2 class="section-title">FÄHIGKEITEN</h2>
                    
                    <div class="languages__container">
                        <ul class="languages__content bd-grid">
                            <li class="languages__name">
                                <span class="languages__circle"> </span>HTML/CSS/JS
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span>Symfony/Laravel
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span>VueJS/Vite
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span>React/Angular
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span>Python/Node.js/Unix
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span>SwiftUI/Figma
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="experience section" id="experience">
                    <h2 class="section-title">MEINE GESCHICHTE</h2>
                    <div class="experience__container bd-grid">

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">MBA Experte für Digitales Marketing</h3>
                                <span class="experience__company"><i class='bx bxs-graduation'></i> Mydigitalschool Nancy | 2023 - 2025</span>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Full-Stack-Ingenieur im Wechsel</h3>
                                <span class="experience__company">September 2023 - August 2025 | COM SEE (2 Jahre)</span>
                                <p class="experience__description"><i class='bx bxs-business' ></i> Entwicklung eines Intranets, spezialisierte Plugins. Web-Integration + SEO</p>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Webentwickler Praktikant</h3>
                                <span class="experience__company">Von März 2023 bis Juni 2023 | Meosis (4 Monate)</span>
                                <p class="experience__description"><i class='bx bxs-business' ></i> Übertragung von Standorten von Server zu Server. Lernen des CMS Prestashop.</p>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Fake-News-Generator mit KI</h3>
                                <span class="experience__company"><i class='bx bxs-briefcase'></i> OpenAI GPT 3 - Laravel Project</span>

                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Web Bachelor-Abschluss mit Auszeichnung</h3>
                                <span class="experience__company"><i class='bx bxs-graduation'></i> University of Lorraine | 2022 - 2023</span>
                            </div>
                        </div>
                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Webentwickler Praktikant</h3>
                                <span class="experience__company">Von April 2022 bis Juni 2022 | QS+ Plattform (3 Monate)</span>
                                <p class="experience__description"><i class='bx bxs-business' ></i> Design and development of a dematerialized training website</p>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">DUT Informatique (HND in IT) mit Auszeichnung</h3>
                                <span class="experience__company"><i class='bx bxs-graduation'></i> University of Lorraine | 2020 - 2022</span>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                                <span class="experience__line"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Verschiedene Missionen</h3>
                                <span class="experience__company">Von 2019 bis 2022 | (6 Monate)</span>
                                <p class="experience__description"><i class='bx bxs-business' ></i> Various summer/student jobs that allowed me to have a first approach to the professionalworld</p>
                            </div>
                        </div>

                        <div class="experience__content">
                            <div class="experience__time">
                                <span class="experience__rounder"></span>
                            </div>

                            <div class="experience__data bd-grid">
                                <h3 class="experience__title">Abitur für nachhaltige Entwicklung</h3>
                                <span class="experience__company"><i class='bx bxs-graduation'></i> Georges Baumont Gymnasium | 2017 - 2020</span>
                            </div>
                        </div>


                    </div>
                </section>

                <section class="languages section" id="langues">
                    <h2 class="section-title">SPRACHEN</h2>

                    <div class="languages__container">
                        <ul class="languages__content bd-grid">
                            <li class="languages__name">
                                <span class="languages__circle"> </span> Französisch (Muttersprache)
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span> Englisch (B2+)
                            </li>
                            <li class="languages__name">
                                <span class="languages__circle"> </span> Deutsch (B1)
                            </li>
                        </ul>
                    </div>
                </section>

                <!--========== INTERESTS ==========-->
                <section class="interests section">
                    <h2 class="section-title">INTERESSEN</h2>

                    <div class="interests__container bd-grid">
                        <div class="interests__content">
                            <i class='bx bxs-basketball interests__icon'></i>
                            <span class="interests__name">Basketball</span>
                        </div>
                        <div class="interests__content">
                            <i class='bx bx-headphone interests__icon'></i>
                            <span class="interests__name">Musik</span>
                        </div>
                        <div class="interests__content">
                            <i class='bx bx-cycling interests__icon'></i>
                            <span class="interests__name">Radfahren</span>
                        </div>
                        <div class="interests__content">
                            <i class='bx bxs-planet interests__icon'></i>
                            <span class="interests__name">Raum</span>
                        </div>
                        <div class="interests__content">
                            <i class='bx bxs-plane-alt interests__icon'></i>
                            <span class="interests__name">Reise</span>
                        </div>
                        <div class="interests__content">
                            <i class='bx bxs-tennis-ball interests__icon' ></i>
                            <span class="interests__name">Tennis</span>
                        </div>
                    </div>
                </section>
            </div>
        </div>

        <a href="de" class="button__nav">
            <h3 class="icon"><i class='bx bx-left-arrow-alt'></i></h3>
            <p class="text">Zurück zum Portfolio</p>
        </a>

        <div class="qr-code-viewver" >
            <div class="content__card">

                <div class="title__container">
                    <h1>Download läuft...</h1>
                </div>

                <div class="container">
                    <div class="check-mark">
                        <div class="content">
                            <input type="checkbox" id="check">
                            <label for="check" id="label-check">
                               <div class="check-icon"></div>
                            </label>
                        </div>
               
                    </div>
                </div>  
            </div>   
        </div>
    </main>

    <!--========== SCROLL TOP ==========-->
    <a href="#" class="scrolltop" id="scroll-top">
        <i class='bx bx-up-arrow-alt scrolltop__icon'></i>
    </a>

    <!--========== HTML2PDF ==========-->
    <script src="assets/js/html2pdf.bundle.min.js"></script>

    <!--========== MAIN JS ==========-->
    <script src="assets/js/cv-main.js"></script>

    <script>

        let download = document.getElementById("resume-button");
        let viewver = document.querySelector('.qr-code-viewver');  
        let checklabel = document.getElementById("label-check"); 
        let checkInput = document.getElementById("check"); 

        download.addEventListener("click", function() {
            displayInterface();
            setTimeout(() => {
                checkValidate();
            }, "2500");
        });

        function displayInterface(){
            viewver.classList.toggle("active-modal");
        }

        function removeInterface(){
            viewver.classList.remove("active-modal");
        }

        function checkValidate() {
            viewver.classList.toggle("download-completed");
            checkInput.setAttribute("checked", "");
            checkInput.setAttribute("disabled", "disabled");
            setTimeout(() => {
                removeInterface();
                viewver.classList.remove("download-completed");
                checkInput.removeAttribute("checked");
                checkInput.removeAttribute("disabled");
            }, "2000");
        }

    </script>
</body>

</html>