katysaintin.github.io/index.html at main · katysaintin/katysaintin.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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Katy Saintin</title>
  <link rel="icon" type="image/png" href="favicon.png">
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-CLGVGY5YNH"></script>
  <script>
   window.dataLayer = window.dataLayer || [];
   function gtag(){dataLayer.push(arguments);}
   gtag('js', new Date());
   gtag('config', 'G-CLGVGY5YNH', { 'anonymize_ip': true });
  </script>
  <style>
    /* ── Styles spécifiques à index.html ── */
    .hero {
      text-align: center;
      padding: 4rem 1rem 3rem;
    }
    .hero h1 {
      font-size: clamp(2.2rem, 9vw, 3.5rem);
      margin-bottom: .6rem;
      font-weight: 800;
    }
    .hero h2 {
      color: var(--navy);
      margin-bottom: .4rem;
      font-size: clamp(1.1rem, 4vw, 1.5rem);
      font-weight: 700;
    }
    .hero .subtitle { color: #666; font-size: 1rem; margin-bottom: 1rem; }

    .skills-line {
      color: #555; font-size: 1rem; margin: .5rem 0 1.5rem;
      display: flex; justify-content: center; align-items: center;
      gap: .4rem; flex-wrap: wrap;
    }
    .skills-line span { color: var(--terracotta); font-weight: 700; }
    .skills-line .dot { color: #bbb; }

    .stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 1rem; margin: 2rem 0;
    }
    .stat { background: white; border-radius: 16px; padding: 1.4rem; text-align: center; }
    .stat-value { font-size: 2rem; font-weight: bold; color: var(--navy); }
    .stat-label { color: #666; font-size: .9rem; margin-top: .3rem; }

    .featured-card {
      background: white; border-left: 6px solid var(--terracotta);
      border-radius: 16px; padding: 1.5rem 2rem; margin-bottom: 1rem;
    }
    .featured-card a { color: var(--navy); font-weight: bold; text-decoration: none; font-size: 1.1rem; }
    .featured-card p { color: #666; margin-top: .4rem; }

    .achievements { background: white; border-radius: 16px; padding: 1.5rem 2rem; }
    .achievements li { margin-bottom: .7rem; line-height: 1.5; }

    .universes { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
    .card { background: white; border-radius: 16px; padding: 1.4rem; }
    .card .card-title { font-weight: 700; color: var(--navy); font-size: 1rem; }
    .card p { color: #555; font-size: .9rem; margin: .4rem 0 .8rem; }
    .card a { color: var(--terracotta); text-decoration: none; font-weight: 600; font-size: .9rem; }
  </style>
</head>
<body>

<!-- La topbar et le panneau sont injectés par site.js -->

<div class="container">
  <section class="hero">
    <h1 id="hero-name"></h1>
    <h2 id="hero-title"></h2>
    <p class="subtitle" id="hero-subtitle"></p>
    <div class="skills-line" id="skills-line"></div>
  </section>

  <section id="stats" class="stats"></section>

  <h2 class="section-title">📄 Curriculum Vitae</h2>
  <div id="featured"></div>

  <h2 class="section-title">🏆 Key Achievements</h2>
  <div id="achievements"></div>

  <h2 class="section-title">🌍 Univers</h2>
  <div id="universes" class="universes"></div>

  <footer id="footer"></footer>
</div>

<script src="js/site.js"></script>
<script>
  // Rendu spécifique à index.html
  document.addEventListener('siteReady', ({ detail: { data, lang } }) => {
    const h = data.hero[lang];
    document.getElementById('hero-name').textContent      = h.name;
    document.getElementById('hero-title').textContent     = h.title;
    document.getElementById('hero-subtitle').textContent  = h.subtitle;

    document.getElementById('skills-line').innerHTML = h.keywords
      .map(k => `<span>${k}</span>`)
      .join('<span class="dot"> • </span>');

    document.getElementById('stats').innerHTML = data.stats.map(s =>
      `<div class="stat">
        <div class="stat-value">${s.value}</div>
        <div class="stat-label">${s[lang]}</div>
      </div>`).join('');

    document.getElementById('featured').innerHTML = data.featured.map(f =>
      `<div class="featured-card">
        <a href="${f.url}">${f.emoji} ${lang === 'fr' ? f.titleFr : f.titleEn}</a>
        <p>${lang === 'fr' ? f.descriptionFr : f.descriptionEn}</p>
      </div>`).join('');

    document.getElementById('achievements').innerHTML =
      `<ul class="achievements">` +
      data.achievements.map(a => `<li>${lang === 'fr' ? a.fr : a.en}</li>`).join('') +
      `</ul>`;

    document.getElementById('universes').innerHTML = data.universes.map(u =>
      `<div class="card">
        <div class="card-title">${u.emoji} ${u.title}</div>
        <p>${lang === 'fr' ? u.descriptionFr : u.descriptionEn}</p>
        ${u.url ? `<a href="${u.url}">Open →</a>` : ''}
      </div>`).join('');
  });
</script>
</body>
</html>