Skip to content

Commit 74bbaa4

Browse files
froelenfroelen
committed
Update index
1 parent 287a888 commit 74bbaa4

File tree

5 files changed

+162
-187
lines changed

5 files changed

+162
-187
lines changed

‎en/index.html‎

Lines changed: 41 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -34,61 +34,53 @@
3434
<link rel="stylesheet" href="../assets/css/index.css">
3535
<link rel="stylesheet" href="../assets/css/en-index.css">
3636

37-
<link rel="preload" href="../assets/css/fonts.css" as="style">
3837
<link rel="preload" href="../assets/css/global.css" as="style">
3938
<link rel="preload" href="../assets/css/index.css" as="style">
4039

4140
<!-- Scripts -->
42-
<script src="../assets/js/scripts.js" defer></script>
41+
<script src="../assets/js/color-scheme.js"></script>
42+
<script src="../assets/js/scripts.js" defer></script> <!-- deferred to prevent stop because of unparsed elements -->
4343

44-
<!-- Metadata for SEO & web crawlers and copyright information -->
44+
<!-- Metadata/copyright information for SEO & web crawlers -->
4545
<meta name="author" content="froelen">
4646
<meta name="copyright" content="© 2026 froelen">
47-
<meta name="google" content="notranslate"> <!-- Prevents Google from translating the page -->
48-
<meta name="theme-color" content="#F7F8FF"> <!-- Sets the theme color for browsers that support it -->
47+
<!-- Sets the theme color for browsers that support it (usually mobile) -->
48+
<meta name="theme-color" content="#F7F8FF">
4949
</head>
5050

5151
<body>
52-
<h1 hidden>froelen's website</h1>
53-
54-
<header id="header" class="collapsed"> <!-- Top bar elements -->
55-
<nav id="navbar"> <!-- Navigation bar -->
56-
<div id="navbar-menu"> <!-- Collapsible menu button -->
57-
<button id="navbar-menu-button"><img id="menu-icon" class="icon" src="../../assets/images/icons/menu.svg"
58-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
59-
alt="Menu button"></button>
60-
</div>
61-
62-
<div id="nav-lang" class="header-left collapsed"> <!-- Language options -->
63-
English | <a href="../fr/">français</a>
64-
</div>
65-
66-
<div id="nav-links" class="header-right collapsed"> <!-- External links -->
67-
<a href="../../github.html" target="_blank">
68-
<img id="github-icon" class="icon" src="../../assets/images/icons/services/github.svg"
69-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
70-
alt="Visit my GitHub profile."></a>
71-
<a href="../../linkedin.html" target="_blank">
72-
<img id="linkedin-icon" class="icon" src="../../assets/images/icons/services/linkedin.png"
73-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
74-
alt="Visit my LinkedIn page."></a>
75-
</div>
76-
77-
<script> // Toggles nav-lang and nav-links visibility from menu button
78-
const menuButton = document.getElementById('navbar-menu-button');
79-
menuButton.addEventListener('click', () => {
80-
menuButton.classList.toggle('open')
81-
document.getElementById('header').classList.toggle('collapsed');
82-
document.getElementById('nav-lang').classList.toggle('collapsed');
83-
document.getElementById('nav-links').classList.toggle('collapsed');
84-
});
85-
</script>
52+
<header id="header">
53+
<button id="nav-button-collapse" class="nav-button">
54+
<img class="icon" src="../assets/images/icons/menu.svg"
55+
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
56+
alt="Menu button">
57+
</button>
58+
59+
<nav id="lang-nav" class="lang-nav" aria-label="Language switch">
60+
English | <a href="../fr/">français</a>
8661
</nav>
8762

88-
<h2 id="title"> <!-- Catchphrase title -->
89-
<span id="title-greet">Hey! I'm </span>
90-
<span id="title-username">froelen</span>
91-
</h2>
63+
<h1 class="title">Hey, I'm froelen</h1>
64+
65+
<nav id="social-nav" class="social-nav" aria-label="Social Links">
66+
<a href="../github.html" target="_blank">
67+
<svg class="icon github-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"
68+
onerror="this.onerror=null; this.src='../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
69+
alt="Visit my GitHub profile.">
70+
<path
71+
d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
72+
fill="currentColor" />
73+
</svg>
74+
</a>
75+
<a href="../linkedin.html" target="_blank">
76+
<svg class="icon linkedin-icon" viewBox="63 0 21 21" xmlns="http://www.w3.org/2000/svg"
77+
onerror="this.onerror=null; this.src='../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
78+
alt="Visit my LinkedIn page.">
79+
<path fill="currentColor" fill-rule="evenodd"
80+
d="M 82.479,0 H 64.583 C 63.727,0 63,0.677 63,1.511 V 19.488 C 63,20.323 63.477,21 64.333,21 H 82.229 C 83.086,21 84,20.323 84,19.488 V 1.511 C 84,0.677 83.336,0 82.479,0 Z M 71,8 h 2.827 v 1.441 h 0.031 C 74.289,8.664 75.562,7.875 77.136,7.875 80.157,7.875 81,9.479 81,12.45 V 18 H 78 V 12.997 C 78,11.667 77.469,10.5 76.227,10.5 74.719,10.5 74,11.521 74,13.197 V 18 h -3 z m -5,10 h 3 V 8 H 66 Z M 69.375,4.5 A 1.8745001,1.8745001 0 1 1 65.626,4.501 1.8745001,1.8745001 0 0 1 69.375,4.5 Z" />
81+
</svg>
82+
</a>
83+
</nav>
9284
</header>
9385

9486
<main>
@@ -183,22 +175,22 @@ <h3>Tech guides</h3>
183175
</main>
184176

185177
<footer>
186-
<button id="color-scheme-button">
178+
<button id="color-scheme-button" class="nav-button">
187179
<img id="sun-icon" class="icon color-scheme-icon" src="../../assets/images/icons/sun.svg"
188180
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
189-
alt="Toggle color scheme (sun icon)">
181+
alt="Toggle color scheme.">
190182
<img id="moon-icon" class="icon color-scheme-icon" src="../../assets/images/icons/moon.svg"
191183
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
192-
alt="Toggle color scheme (moon icon)">
184+
alt="Toggle color scheme.">
193185
</button>
194186

195-
<p id="copyright">© 2026 - froelen<br>Credits: see <a href="credits.html">here.</a></p>
187+
<p id="copyright">© 2026 - froelen<br><a href="credits.html">Credits</a></p>
196188

197-
<div id="map">
189+
<div id="site-map">
198190
<p>
199191
<a href="#about">About</a><br>
200192
<a href="#portfolio">Portfolio</a><br>
201-
<!-- <a href="links.html">Links</a><br> -->
193+
<a href="links.html">Links</a><br>
202194
<a href="https://github.com/froelen/froelen.github.io" target="_blank">Repository</a><br>
203195
</p>
204196
</div>

‎fr/index.html‎

Lines changed: 46 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88

99
<!-- Title and description -->
10-
<title>Site web de froelen</title>
10+
<title>froelen</title>
1111
<meta name="description" content="Apprenez à connaître froelen, étudiant en informatique, et découvrez son travail.">
1212

1313
<!-- SEO meta tags for search engines indexation and score optimisation -->
@@ -16,12 +16,12 @@
1616
<link rel="canonical" href="https://froelen.is-a.dev/fr/">
1717

1818
<!-- Open Graph meta tags for social media sharing -->
19-
<meta property="og:title" content="MISSING TRANSLATION IN ./assets/ssg-templates/index.html: head.og:title">
20-
<meta property="og:description" content="MISSING TRANSLATION IN ./assets/ssg-templates/index.html: head.og:description">
19+
<meta property="og:title" content="Site web de froelen - Étudiant en informatique">
20+
<meta property="og:description" content="Découvrez qui je suis et ce que je fais.">
2121
<meta property="og:url" content="https://froelen.is-a.dev/fr/">
2222
<meta property="og:type" content="website">
2323
<meta property="og:image" content="https://froelen.is-a.dev/assets/images/og-image.jpg">
24-
<meta property="og:locale" content="MISSING TRANSLATION IN ./assets/ssg-templates/index.html: head.og:locale">
24+
<meta property="og:locale" content="fr_FR">
2525

2626
<!-- Alternate language versions for SEO and user experience -->
2727
<link rel="alternate" hreflang="fr" href="https://froelen.is-a.dev/fr/">
@@ -34,61 +34,53 @@
3434
<link rel="stylesheet" href="../assets/css/index.css">
3535
<link rel="stylesheet" href="../assets/css/fr-index.css">
3636

37-
<link rel="preload" href="../assets/css/fonts.css" as="style">
3837
<link rel="preload" href="../assets/css/global.css" as="style">
3938
<link rel="preload" href="../assets/css/index.css" as="style">
4039

4140
<!-- Scripts -->
42-
<script src="../assets/js/scripts.js" defer></script>
41+
<script src="../assets/js/color-scheme.js"></script>
42+
<script src="../assets/js/scripts.js" defer></script> <!-- deferred to prevent stop because of unparsed elements -->
4343

44-
<!-- Metadata for SEO & web crawlers and copyright information -->
44+
<!-- Metadata/copyright information for SEO & web crawlers -->
4545
<meta name="author" content="froelen">
4646
<meta name="copyright" content="© 2026 froelen">
47-
<meta name="google" content="notranslate"> <!-- Prevents Google from translating the page -->
48-
<meta name="theme-color" content="#F7F8FF"> <!-- Sets the theme color for browsers that support it -->
47+
<!-- Sets the theme color for browsers that support it (usually mobile) -->
48+
<meta name="theme-color" content="#F7F8FF">
4949
</head>
5050

5151
<body>
52-
<h1 hidden>Site web de froelen</h1>
53-
54-
<header id="header" class="collapsed"> <!-- Top bar elements -->
55-
<nav id="navbar"> <!-- Navigation bar -->
56-
<div id="navbar-menu"> <!-- Collapsible menu button -->
57-
<button id="navbar-menu-button"><img id="menu-icon" class="icon" src="../../assets/images/icons/menu.svg"
58-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
59-
alt="Bouton menu"></button>
60-
</div>
61-
62-
<div id="nav-lang" class="header-left collapsed"> <!-- Language options -->
63-
français | <a href="../en/">English</a>
64-
</div>
65-
66-
<div id="nav-links" class="header-right collapsed"> <!-- External links -->
67-
<a href="../../github.html" target="_blank">
68-
<img id="github-icon" class="icon" src="../../assets/images/icons/services/github.svg"
69-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
70-
alt="Visite mon profile GitHub."></a>
71-
<a href="../../linkedin.html" target="_blank">
72-
<img id="linkedin-icon" class="icon" src="../../assets/images/icons/services/linkedin.png"
73-
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
74-
alt="Visite ma page LinkedIn."></a>
75-
</div>
76-
77-
<script> // Toggles nav-lang and nav-links visibility from menu button
78-
const menuButton = document.getElementById('navbar-menu-button');
79-
menuButton.addEventListener('click', () => {
80-
menuButton.classList.toggle('open')
81-
document.getElementById('header').classList.toggle('collapsed');
82-
document.getElementById('nav-lang').classList.toggle('collapsed');
83-
document.getElementById('nav-links').classList.toggle('collapsed');
84-
});
85-
</script>
52+
<header id="header">
53+
<button id="nav-button-collapse" class="nav-button">
54+
<img class="icon" src="../assets/images/icons/menu.svg"
55+
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
56+
alt="Bouton menu">
57+
</button>
58+
59+
<nav id="lang-nav" class="lang-nav" aria-label="Language switch">
60+
français | <a href="../en/">English</a>
8661
</nav>
8762

88-
<h2 id="title"> <!-- Catchphrase title -->
89-
<span id="title-greet">Hey ! Je suis </span>
90-
<span id="title-username">froelen</span>
91-
</h2>
63+
<h1 class="title">Hey, je suis froelen</h1>
64+
65+
<nav id="social-nav" class="social-nav" aria-label="Social Links">
66+
<a href="../github.html" target="_blank">
67+
<svg class="icon github-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg"
68+
onerror="this.onerror=null; this.src='../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
69+
alt="Visite mon profile GitHub.">
70+
<path
71+
d="M41.4395 69.3848C28.8066 67.8535 19.9062 58.7617 19.9062 46.9902C19.9062 42.2051 21.6289 37.0371 24.5 33.5918C23.2559 30.4336 23.4473 23.7344 24.8828 20.959C28.7109 20.4805 33.8789 22.4902 36.9414 25.2656C40.5781 24.1172 44.4062 23.543 49.0957 23.543C53.7852 23.543 57.6133 24.1172 61.0586 25.1699C64.0254 22.4902 69.2891 20.4805 73.1172 20.959C74.457 23.543 74.6484 30.2422 73.4043 33.4961C76.4668 37.1328 78.0937 42.0137 78.0937 46.9902C78.0937 58.7617 69.1934 67.6621 56.3691 69.2891C59.623 71.3945 61.8242 75.9883 61.8242 81.252L61.8242 91.2051C61.8242 94.0762 64.2168 95.7031 67.0879 94.5547C84.4102 87.9512 98 70.6289 98 49.1914C98 22.1074 75.9883 6.69539e-07 48.9043 4.309e-07C21.8203 1.92261e-07 -1.9479e-07 22.1074 -4.3343e-07 49.1914C-6.20631e-07 70.4375 13.4941 88.0469 31.6777 94.6504C34.2617 95.6074 36.75 93.8848 36.75 91.3008L36.75 83.6445C35.4102 84.2188 33.6875 84.6016 32.1562 84.6016C25.8398 84.6016 22.1074 81.1563 19.4277 74.7441C18.375 72.1602 17.2266 70.6289 15.0254 70.3418C13.877 70.2461 13.4941 69.7676 13.4941 69.1934C13.4941 68.0449 15.4082 67.1836 17.3223 67.1836C20.0977 67.1836 22.4902 68.9063 24.9785 72.4473C26.8926 75.2227 28.9023 76.4668 31.2949 76.4668C33.6875 76.4668 35.2187 75.6055 37.4199 73.4043C39.0469 71.7773 40.291 70.3418 41.4395 69.3848Z"
72+
fill="currentColor" />
73+
</svg>
74+
</a>
75+
<a href="../linkedin.html" target="_blank">
76+
<svg class="icon linkedin-icon" viewBox="63 0 21 21" xmlns="http://www.w3.org/2000/svg"
77+
onerror="this.onerror=null; this.src='../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
78+
alt="Visite ma page LinkedIn.">
79+
<path fill="currentColor" fill-rule="evenodd"
80+
d="M 82.479,0 H 64.583 C 63.727,0 63,0.677 63,1.511 V 19.488 C 63,20.323 63.477,21 64.333,21 H 82.229 C 83.086,21 84,20.323 84,19.488 V 1.511 C 84,0.677 83.336,0 82.479,0 Z M 71,8 h 2.827 v 1.441 h 0.031 C 74.289,8.664 75.562,7.875 77.136,7.875 80.157,7.875 81,9.479 81,12.45 V 18 H 78 V 12.997 C 78,11.667 77.469,10.5 76.227,10.5 74.719,10.5 74,11.521 74,13.197 V 18 h -3 z m -5,10 h 3 V 8 H 66 Z M 69.375,4.5 A 1.8745001,1.8745001 0 1 1 65.626,4.501 1.8745001,1.8745001 0 0 1 69.375,4.5 Z" />
81+
</svg>
82+
</a>
83+
</nav>
9284
</header>
9385

9486
<main>
@@ -183,23 +175,23 @@ <h3>Guides tech</h3>
183175
</main>
184176

185177
<footer>
186-
<button id="color-scheme-button">
178+
<button id="color-scheme-button" class="nav-button">
187179
<img id="sun-icon" class="icon color-scheme-icon" src="../../assets/images/icons/sun.svg"
188180
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
189-
alt="Permuter le thème de couleur (icône de soleil)">
181+
alt="Permuter le thème de couleur">
190182
<img id="moon-icon" class="icon color-scheme-icon" src="../../assets/images/icons/moon.svg"
191183
onerror="this.onerror=null; this.src='../../assets/images/icons/missing.svg'; this.classList.add('icon-missing')"
192-
alt="Permuter le thème de couleur (icône de lune)">
184+
alt="Permuter le thème de couleur">
193185
</button>
194186

195-
<p id="copyright">© 2026 - froelen<br>Crédits: voir <a href="credits.html">ici.</a></p>
187+
<p id="copyright">© 2026 - froelen<br><a href="credits.html">Crédits</a></p>
196188

197-
<div id="map">
189+
<div id="site-map">
198190
<p>
199191
<a href="#about">À propos</a><br>
200192
<a href="#portfolio">Portfolio</a><br>
201-
<!-- <a href="links.html">Liens</a><br> -->
202-
<a href="https://github.com/froelen/froelen.github.io" target="_blank">Dépôt</a><br>
193+
<a href="links.html">Liens</a><br>
194+
<a href="https://github.com/froelen/froelen.github.io" target="_blank">Code source</a><br>
203195
</p>
204196
</div>
205197
</footer>

‎ssg-lang/en.json‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -27,20 +27,20 @@
2727
},
2828
"index": {
2929
"lang": "en",
30+
"lang.alt.1": "fr",
31+
"lang.name": "English",
32+
"lang.alt.1.name": "français",
33+
"url": "froelen.is-a.dev",
34+
"page": "index",
3035
"head.title": "froelen's website",
3136
"head.description": "Get to know froelen, a computer science student, and discover his works.",
32-
"url": "froelen.is-a.dev",
3337
"head.og:title": "froelen's wesbite - Computer Science student",
3438
"head.og:description": "Discover who I am and what I do.",
3539
"head.og:locale": "en_US",
36-
"lang.alt.1": "fr",
37-
"h1":"froelen's website",
38-
"nav.menu.alt": "Menu button",
39-
"lang.name": "English",
40-
"lang.alt.1.name": "français",
41-
"nav.links.github.alt": "Visit my GitHub profile.",
42-
"nav.links.linkedin.alt": "Visit my LinkedIn page.",
43-
"title.greet": "Hey! I'm ",
40+
"header.nav-button-collapse.alt": "Menu button",
41+
"header.h1": "Hey, I'm froelen",
42+
"header.social.github.alt": "Visit my GitHub profile.",
43+
"header.social.linkedin.alt": "Visit my LinkedIn page.",
4444
"content-intro-main": "Computer science student learning through a mix of courses and self-teaching.<br>Currently learning: Python, HTML, CSS, JavaScript. Interested in: Java, Rust",
4545
"content-intro-links": "Click <a href=\"links.html\">here</a> for my social profiles!",
4646
"pf.website.h3": "Personal website",
@@ -65,13 +65,12 @@
6565
"pf.guides": "Tutorials and other tech-related ressources.",
6666
"supporters-thanks": "Many thanks to everyone supporting me:",
6767
"supporters-cta": "Buy me a baguette!",
68-
"footer.sun":"Toggle color scheme (sun icon)",
69-
"footer.moon":"Toggle color scheme (moon icon)",
70-
"footer.credits":"Credits: see <a href=\"credits.html\">here.",
71-
"footer.map.about":"About",
72-
"footer.map.portfolio":"Portfolio",
73-
"footer.map.links":"Links",
74-
"footer.map.repo":"Repository"
68+
"footer.scheme.sun": "Toggle color scheme.",
69+
"footer.scheme.moon": "Toggle color scheme.",
70+
"footer.credits": "Credits",
71+
"footer.map.about": "About",
72+
"footer.map.links": "Links",
73+
"footer.map.repo": "Repository"
7574
},
7675
"links": {
7776
"--head--": null,

0 commit comments

Comments
 (0)