mathieu-lin.github.io/index.html at main · Mathieu-Lin/mathieu-lin.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html lang="fr" data-theme="dark">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Mathieu LIN - Portfolio</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <!-- Navbar -->
  <nav class="navbar">
    <ul>
      <li><a href="#about">À propos</a></li>
      <li><a href="#skills">Compétences</a></li>
      <li><a href="#experience">Parcours</a></li>
      <li><a href="#projects">Projets</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
    <button id="theme-toggle" aria-label="Changer le thème">🌙</button>
  </nav>

  <!-- Hero Section -->
  <section class="hero">
    <h1>Mathieu LIN</h1>
    <p>Étudiant en M1 Informatique</p>
    <p>Passionné par la finance, l'investissement et la tech</p>
    <div class="button-group">
      <!-- <a href="./Divers/CV.pdf" class="cta-button">📄 CV</a> -->
      <a href="https://github.com/Mathieu-Lin" target="_blank" class="cta-button outline">💻 GitHub</a>
    </div>
  </section>

  <!-- Sections -->
  <section id="about" class="section">
    <h2>À propos</h2>
    <p>
      Serveur depuis 6 ans, je développe mes compétences en informatique et en finance pour bâtir un profil polyvalent.
      J’aime apprendre, diversifier mes savoirs et relever des défis.
    </p>
  </section>

  <section id="skills" class="section">
    <h2>Compétences</h2>
    <div class="skills-tags">
      <span class="tag">💻 Programmation</span>
      <span class="tag">📊 Finance</span>
      <span class="tag">📈 Investissement</span>
      <span class="tag">🧑‍💼 Service client</span>
      <span class="tag">🏦 Gestion de patrimoine</span>
    </div>
  </section>

  <section id="experience" class="section">
    <h2>Parcours</h2>

    <!-- Expériences professionnelles -->
    <h3>Expériences professionnelles</h3>
    <div class="timeline">
      <div class="timeline-item animate-item">
        <h4>Serveur</h4>
        <p>Restaurant Yoshi Sushi, Aix-les-Bains – Depuis 11/2019</p>
      </div>
    </div>

    <!-- Formations -->
    <h3>Formations</h3>
    <div class="timeline">
      <div class="timeline-item animate-item">
        <h4>Master 1 Informatique</h4>
        <p>Université Savoie Mont Blanc – Depuis septembre 2025</p>
      </div>
      <div class="timeline-item animate-item">
        <h4>Licence 3 Informatique</h4>
        <p>Université Savoie Mont Blanc – septembre 2024 à septembre 2025</p>
      </div>
      <div class="timeline-item animate-item">
        <h4>1ère année du cycle ingénieur Informatique, données et usages</h4>
        <p>Polytech Annecy – septembre 2023 à septembre 2024</p>
      </div>
      <div class="timeline-item animate-item">
        <h4>Deux années en cycle préparatoire intégré Polytech, parcours Informatique</h4>
        <p>Polytech Chambéry – septembre 2021 à septembre 2023</p>
      </div>
    </div>
  </section>


  <section id="projects" class="section">
    <h2>Projets</h2>
    <div class="projects-list">
      <div class="project-card animate-item">
        <h3> Projets universitaire</h3>
        <p>En cours ...</p>
        <a href="https://github.com/Mathieu-Lin?tab=repositories" target="_blank">Voir sur GitHub</a>
      </div>
    </div>
  </section>


  <section id="contact" class="section">
    <h2>Contact</h2>
    <div class="social-icons">
      <a href="https://github.com/Mathieu-Lin"><img src="https://cdn-icons-png.flaticon.com/512/25/25231.png" alt="GitHub" /></a>
      <a href="https://www.linkedin.com/in/mathieu-lin/"><img src="https://cdn-icons-png.flaticon.com/512/174/174857.png" alt="LinkedIn" /></a>
    </div>
  </section>

  <footer class="footer">
    <p>© 2025 Mathieu Lin</p>
  </footer>

  <script src="index.js"></script>
</body>
</html>