<template>
  <section id="experience" class="experience">
    <div class="experience-container">
      <h2 class="section-title">Compétences</h2>
      <div class="skills-grid">
        <div class="skill-card animate-splash">
          <h3 class="skill-title">Langages & Frameworks</h3>
          <div class="skill-tags">
            <span class="skill-tag">PHP</span>
            <span class="skill-tag">Drupal</span>
            <span class="skill-tag">Symfony</span>
            <span class="skill-tag">Laravel</span>
          </div>
        </div>
        <div class="skill-card animate-splash">
          <h3 class="skill-title">Systèmes & DevOps</h3>
          <div class="skill-tags">
            <span class="skill-tag">Docker</span>
            <span class="skill-tag">Linux</span>
            <span class="skill-tag">Git</span>
            <span class="skill-tag">CI/CD</span>
          </div>
        </div>
        <div class="skill-card animate-splash">
          <h3 class="skill-title">Administration & Sécurité</h3>
          <div class="skill-tags">
            <span class="skill-tag">Administration Systèmes</span>
            <span class="skill-tag">Sécurité Web</span>
            <span class="skill-tag">Monitoring</span>
            <span class="skill-tag">SQL</span>
          </div>
        </div>
      </div>

      <div class="experience-section">
        <h2 class="section-title">Mon Parcours</h2>
        <div class="timeline">
          <div class="timeline-title">
            <h3 class="timeline-heading">Expérience Professionnelle</h3>
            <svg
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"
              class="timeline-icon timeline-icon-work"
            >
              <path
                d="M8 3c.132 0 .263 0 .393 0 7.107.007 10.372 6.167 11.917 11.917.078.287.156.575.234.863"
              ></path>
              <path
                d="M20.039 17.39c-.221-.89-.943-1.396-1.871-1.394a1.99 1.99 0 0 0-1.988 1.994v.012a1.998 1.998 0 0 0 2.004 1.998c.464 0 .91-.196 1.244-.548"
              ></path>
              <path
                d="M7.05 4.095c-1.815-.407-3.246-.089-4.028 1.007C1.082 7.547 1.603 12.19 4 16c2.492 0 4.623-1.33 6.234-3.219"
              ></path>
              <path d="M11.167 12c1.174-1.525 2.272-3.747 2.272-6.8V3"></path>
              <circle cx="16" cy="10" r="1"></circle>
            </svg>
          </div>

          <div class="timeline-items">
            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">
                    Administrateur Systèmes et Réseaux Web | STUDIO BESTIO
                  </h3>
                  <p class="card-date">Février 2025 - Aujourd'hui</p>
                  <div class="card-location">
                    <span>Nancy, France</span>
                    <span>· Indépendant</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">Docker</span>
                  <span class="card-tag">Linux</span>
                </div>
              </div>
              <div class="card-content">
                <p>
                  Gestion de l'hébergement, de sauvegardes, de la maintenance et
                  de la sécurité des sites web pour Studiobestio. Administration
                  des serveurs, supervision des performances, gestion de la
                  journalisation, mise en place de solutions de sécurité pour
                  assurer une protection contre les cybermenaces. Garantir le
                  bon fonctionnement, la sécurité et la fiabilité des sites web
                  des clients.
                </p>
              </div>
            </div>

            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0.1s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">Développeur PHP | GIE SIMA</h3>
                  <p class="card-date">Mai 2023 - Aujourd'hui</p>
                  <div class="card-location">
                    <span>Nancy, France</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">PHP</span>
                  <span class="card-tag">Drupal</span>
                  <span class="card-tag">Docker</span>
                </div>
              </div>
              <div class="card-content">
                <p>
                  Réecriture et maintenance d'une application pour la vente de
                  contrats de santé ou prévoyance déstinée à des
                  courtiers/conseillers.
                </p>
              </div>
            </div>

            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0.2s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">Consultant | DAVIDSON CONSULTING</h3>
                  <p class="card-date">Février 2023 - Mai 2023</p>
                  <div class="card-location">
                    <span>Nancy, France</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">PHP</span>
                  <span class="card-tag">Drupal</span>
                </div>
              </div>
              <div class="card-content">
                <p>Développement d'applications clients</p>
              </div>
            </div>

            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0.3s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">
                    Développeur web | GANTOIS INDUSTRIES
                  </h3>
                  <p class="card-date">Sept. 2021 - Avr. 2022</p>
                  <div class="card-location">
                    <span>Saint-Dié, France</span>
                    <span>· Intérimaire</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">PHP</span>
                  <span class="card-tag">Symfony</span>
                </div>
              </div>
              <div class="card-content">
                <p>Développement d'applications métier</p>
              </div>
            </div>

            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0.4s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">
                    Développeur web | GANTOIS INDUSTRIES
                  </h3>
                  <p class="card-date">Nov. 2020 - Sept. 2021</p>
                  <div class="card-location">
                    <span>Saint-Dié, France</span>
                    <span>· Alternance</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">PHP</span>
                  <span class="card-tag">Symfony</span>
                </div>
              </div>
              <div class="card-content">
                <p>
                  Développement et maintenance d'une application de contrôle
                  qualité pour les pièces industrielles.
                </p>
              </div>
            </div>

            <div
              class="timeline-card animate-splash"
              style="animation-delay: 0.5s"
            >
              <div class="card-header">
                <div>
                  <h3 class="card-title">
                    Développeur Full Stack | 2110 FINANCE
                  </h3>
                  <p class="card-date">Juillet 2020</p>
                  <div class="card-location">
                    <span>Saint-Dié, France</span>
                    <span>· Stage</span>
                  </div>
                </div>
                <div class="card-tags">
                  <span class="card-tag">PHP</span>
                  <span class="card-tag">Laravel</span>
                </div>
              </div>
              <div class="card-content">
                <p>Application de messagerie interne</p>
              </div>
            </div>
          </div>

          <div class="section-divider"></div>

          <div>
            <div class="timeline-title">
              <h3 class="timeline-heading">Formation</h3>
              <svg
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="timeline-icon timeline-icon-education"
              >
                <path
                  d="M22 12A10 10 0 1 1 12 2a1 1 0 0 1 1 1v1a1 1 0 1 1-2 0V3.07A8 8 0 1 0 19 12h-3a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1"
                ></path>
                <path d="M11.8 22h.2a3 3 0 0 0 3-3v-1"></path>
                <path
                  d="M20 19a2 2 0 0 0 2-2v-1a3 3 0 0 0-3-3h-1a2 2 0 0 0-2 2"
                ></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
            </div>

            <div class="timeline-items">
              <div
                class="timeline-card education-card animate-splash"
                style="animation-delay: 0s"
              >
                <div class="card-header">
                  <div>
                    <h3 class="card-title">
                      Licence en application web et mobile | Université de
                      Lorraine
                    </h3>
                    <p class="card-date">2020 - 2021</p>
                    <div class="card-location">
                      <span>Nancy, France</span>
                    </div>
                  </div>
                </div>
                <div class="card-content">
                  <p>
                    Formation en développement d'applications web et mobiles
                  </p>
                </div>
              </div>

              <div
                class="timeline-card education-card animate-splash"
                style="animation-delay: 0.1s"
              >
                <div class="card-header">
                  <div>
                    <h3 class="card-title">
                      DUT informatique | Université de Lorraine
                    </h3>
                    <p class="card-date">2018 - 2020</p>
                    <div class="card-location">
                      <span>Nancy, France</span>
                    </div>
                  </div>
                </div>
                <div class="card-content">
                  <p>
                    Formation en informatique générale avec spécialisation en
                    développement
                  </p>
                </div>
              </div>

              <div
                class="timeline-card education-card animate-splash"
                style="animation-delay: 0.2s"
              >
                <div class="card-header">
                  <div>
                    <h3 class="card-title">
                      Baccalauréat Scientifique | Lycée Gaston Bachelard
                    </h3>
                    <p class="card-date">2015 - 2018</p>
                    <div class="card-location">
                      <span>Bar-sur-Aube, France</span>
                    </div>
                  </div>
                </div>
                <div class="card-content">
                  <p>Baccalauréat avec option mathématiques</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: "Experience",
};
</script>

<style scoped>
.experience {
  padding: 2rem 0;
  scroll-margin-top: 4rem;
}

.experience-container {
  max-width: 64rem;
}

.section-title {
  font-size: 1.875rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.skill-card {
  background-color: white;
  padding: 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skill-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--duck-dark-blue);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.skill-tag {
  background-color: var(--duck-yellow);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.experience-section {
  margin-bottom: 3rem;
}

.timeline {
  margin-top: 2rem;
}

.timeline-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.timeline-heading {
  font-size: 1.5rem;
  font-weight: 700;
}

.timeline-icon {
  width: 2rem;
  height: 2rem;
}

.timeline-icon-work {
  color: var(--duck-blue);
}

.timeline-icon-education {
  color: var(--duck-orange);
}

.timeline-items {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.timeline-card {
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background-color: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  width: 100%;
  margin-bottom: 1rem;
  border-left: 4px solid var(--duck-blue);
}

.education-card {
  border-left: 4px solid var(--duck-orange);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.5rem;
  padding-bottom: 0.5rem;
}

.card-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.card-date {
  font-size: 0.875rem;
  color: var(--gray-500);
}

.card-location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--gray-600);
  margin-top: 0.25rem;
}

.card-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.card-tag {
  background-color: rgba(34, 139, 34, 0.2);
  color: var(--text-color);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
}

.card-content {
  padding: 1.5rem;
  padding-top: 0;
}

.card-content p {
  color: var(--gray-700);
}

.section-divider {
  height: 1px;
  width: 100%;
  background-color: #e5e7eb;
  margin: 2.5rem 0;
}

@media (min-width: 768px) {
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
</style>
