nicolas_bocquet/index.html at main · NicoBocq/nicolas_bocquet · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nicolas Bocquet - Product Engineer</title>
    <meta name="description"
        content="Nicolas Bocquet, Product Engineer based in Marseille. TypeScript / React / Node. 12 years in journalism and project management before coding.">
    <meta name="author" content="Nicolas Bocquet">

    <meta property="og:type" content="website">
    <meta property="og:url" content="https://1h12.com">
    <meta property="og:title" content="Nicolas Bocquet - Product Engineer">
    <meta property="og:description"
        content="Product Engineer based in Marseille. TypeScript / React / Node. Builds products, not just features.">
    <meta property="og:image" content="https://1h12.com/img/og-image.png">

    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://1h12.com">
    <meta property="twitter:title" content="Nicolas Bocquet - Product Engineer">
    <meta property="twitter:description"
        content="Nicolas Bocquet, Product Engineer based in Marseille. TypeScript / React / Node. 12 years in journalism and project management before coding.">
    <meta property="twitter:image" content="https://1h12.com/img/og-image.png">

    <link rel="alternate" hreflang="en"        href="https://1h12.com/?lang=en">
    <link rel="alternate" hreflang="fr"        href="https://1h12.com/?lang=fr">
    <link rel="alternate" hreflang="x-default" href="https://1h12.com/">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg?v=20260725">
    <link rel="stylesheet" href="css/style.css?v=20260725">
</head>

<body>

    <div class="container">

        <header class="topbar">
            <span class="logo-mark font-mono">
                <svg viewBox="0 0 100 100" aria-hidden="true">
                    <rect width="100" height="100" rx="22" fill="var(--color-text)"/>
                    <line x1="50" y1="53" x2="61.8" y2="36.8" stroke="var(--color-bg)" stroke-width="10" stroke-linecap="round"/>
                    <line x1="50" y1="53" x2="78.5" y2="43.7" stroke="var(--color-bg)" stroke-width="10" stroke-linecap="round"/>
                    <circle cx="50" cy="53" r="6" fill="var(--color-bg)"/>
                </svg>1h12</span>
            <div class="header-controls">
                <button class="lang-toggle" id="langToggle" aria-label="Toggle language" type="button"></button>
                <button class="theme-toggle" id="themeToggle" aria-label="Toggle theme" aria-pressed="false" type="button"></button>
            </div>
        </header>

        <nav class="section-index" aria-label="Sections">
            <a href="#about" data-i18n="sections.about">About</a>
            <a href="#experience" data-i18n="sections.experience">Experience</a>
            <a href="#projects" data-i18n="sections.projects">Projects</a>
            <a href="#skills" data-i18n="sections.skills">Skills</a>
            <a href="resume.html" class="nav-resume" data-i18n="nav.resume">RESUME</a>
        </nav>

        <section class="hero" id="hero">
            <h1 class="hero-name" aria-label="Nicolas Bocquet">
                <span class="hero-line" data-text="NICOLAS"></span>
                <span class="hero-line" data-text="BOCQUET"></span>
            </h1>
            <p class="hero-role font-mono" id="profile-role"></p>
        </section>

        <main id="main-content">
            <section class="section" id="about">
                <div class="section-head">
                    <h2 class="section-title" data-i18n="sections.about">About</h2>
                </div>
                <div id="about-container" class="about-container"></div>
            </section>

            <section class="section" id="experience">
                <div class="section-head">
                    <h2 class="section-title" data-i18n="sections.experience">Experience</h2>
                </div>
                <div class="content-wrapper">
                    <ul class="project-list spotlight-group" id="main-experience-list"></ul>
                </div>
            </section>

            <section class="section" id="projects">
                <div class="section-head">
                    <h2 class="section-title" data-i18n="sections.projects">Projects</h2>
                </div>
                <div class="content-wrapper">
                    <ul class="project-list" id="opensource-list"></ul>
                </div>
            </section>
            <section class="section" id="skills">
                <div class="section-head">
                    <h2 class="section-title" data-i18n="sections.skills">Skills</h2>
                </div>
                <div class="content-wrapper" id="skills-container"></div>
            </section>
        </main>

        <footer id="contact">
            <ul class="contact-list font-mono">
                <li><a href="#" id="emailLink" data-user="nicolas" data-domain="1h12.com"
                        aria-label="Copy Email Address">EMAIL</a></li>
                <li><a href="https://github.com/NicoBocq" target="_blank" rel="noopener noreferrer" aria-label="GitHub Profile (opens in new tab)">GITHUB</a></li>
                <li><a href="https://www.linkedin.com/in/bocquetnicolas" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn Profile (opens in new tab)">LINKEDIN</a></li>
                <li class="separator footer-separator">|</li>
                <li><a href="resume.html" aria-label="View Resume" class="resume-link" data-i18n="nav.resume">RESUME</a></li>
            </ul>
            <span class="footer-brand font-mono">
                <svg viewBox="0 0 100 100" aria-hidden="true">
                    <rect width="100" height="100" rx="22" fill="var(--color-text)"/>
                    <line x1="50" y1="53" x2="61.8" y2="36.8" stroke="var(--color-bg)" stroke-width="10" stroke-linecap="round"/>
                    <line x1="50" y1="53" x2="78.5" y2="43.7" stroke="var(--color-bg)" stroke-width="10" stroke-linecap="round"/>
                    <circle cx="50" cy="53" r="6" fill="var(--color-bg)"/>
                </svg>
                © 2026 — 1h12.com
            </span>
        </footer>
    </div>

    <script src="js/data.js?v=20260725"></script>
    <script src="js/utils.js?v=20260725"></script>
    <script src="js/main.js?v=20260722"></script>
    <script src="js/hero.js?v=20260725"></script>
    <script defer src="https://analytics.1h12.com/script.js" data-website-id="d6d7c72d-5201-4122-8adb-5b667f87d7b0"></script>
</body>

</html>