tarion/tarion.org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add language support with english and german supported

Browse source
This commit is contained in:
Patrick Schwarzer 2025-05-12 22:22:12 +02:00
parent d7033aec94
commit 173f104f58
4 changed files with 108 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

51
index.html
View file

@ -1,7 +1,6 @@
<!doctype html> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -18,16 +17,16 @@
<ul> <ul>
<li> <li>
<a href="#">Home</a> <a data-i18n="nav_home" href="#"></a>
</li> </li>
<li> <li>
<a href="#projects">Projects</a> <a data-i18n="nav_projects" href="#projects"></a>
</li> </li>
<li> <li>
<a href="#skills">Skills</a> <a data-i18n="nav_skills" href="#skills"></a>
</li> </li>
<li> <li>
<a href="#contact">Contact</a> <a data-i18n="nav_contact" href="#contact"></a>
</li> </li>
</ul> </ul>
<button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button> <button id="dark-mode-toggle" class="dark-mode-toggle"><i class="fa-solid fa-sun"></i></button>
@ -39,16 +38,16 @@
<nav id="mobile-nav" class="mobile-nav"> <nav id="mobile-nav" class="mobile-nav">
<ul> <ul>
<li> <li>
<a href="#">Home</a> <a data-i18n="nav_home" href="#"></a>
</li> </li>
<li> <li>
<a href="#projects">Projects</a> <a data-i18n="nav_projects" href="#projects"></a>
</li> </li>
<li> <li>
<a href="#skills">Skills</a> <a data-i18n="nav_skills" href="#skills"></a>
</li> </li>
<li> <li>
<a href="#contact">Contact</a> <a data-i18n="nav_contact" href="#contact"></a>
</li> </li>
<div class="links"> <div class="links">
<button id="dark-mode-toggle-mobile" class="dark-mode-toggle-mobile"><i class="fa-solid fa-sun"></i></button> <button id="dark-mode-toggle-mobile" class="dark-mode-toggle-mobile"><i class="fa-solid fa-sun"></i></button>
@ -61,9 +60,9 @@
<main> <main>
<section id="home"> <section id="home">
<div class="home-container"> <div class="home-container">
<h1>Hey <span class="wave">👋</span> I'm <span>Tarion</span>.</h1> <h1 data-i18n="home_greeting"></h1>
<h2>Game Programmer</h2> <h2 data-i18n="home_subtitle"></h2>
<p>Currently developing a game using the Unity Engine.</p> <p data-i18n="home_description"></p>
<div class="links"> <div class="links">
<a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a> <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
<a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a> <a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
@ -71,11 +70,11 @@
</section> </section>
<section id="projects"> <section id="projects">
<div class="projects-container"> <div class="projects-container">
<h1>Projects</h1> <h1 data-i18n="projects_title"></h1>
<div class="projects"> <div class="projects">
<div class="project"> <div class="project">
<h1>Game Engine</h1> <h1 data-i18n="project_game_engine_title"></h1>
<p>A custom C++ game engine with Lua scripting integration.</p> <p data-i18n="project_game_engine_description"></p>
<ul> <ul>
<li>C++</li> <li>C++</li>
<li>Lua</li> <li>Lua</li>
@ -83,8 +82,8 @@
<a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a> <a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
</div> </div>
<div class="project"> <div class="project">
<h1>schwarzer-energie.de</h1> <h1 data-i18n="project_schwarzer_title"></h1>
<p>Website for a chimney sweeping and energy certification business.</p> <p data-i18n="project_schwarzer_description"></p>
<ul> <ul>
<li>HTML</li> <li>HTML</li>
<li>CSS</li> <li>CSS</li>
@ -94,8 +93,8 @@
<a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a> <a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
</div> </div>
<div class="project"> <div class="project">
<h1>tarion.org</h1> <h1 data-i18n="project_tarion_org_title"></h1>
<p>Personal portfolio showcasing my projects and development work.</p> <p data-i18n="project_tarion_org_description"></p>
<ul> <ul>
<li>HTML</li> <li>HTML</li>
<li>CSS</li> <li>CSS</li>
@ -105,8 +104,8 @@
<a href="https://tarion.org/"><i class="fa-solid fa-globe"></i></a> <a href="https://tarion.org/"><i class="fa-solid fa-globe"></i></a>
</div> </div>
<div class="project"> <div class="project">
<h1>LOV-8</h1> <h1 data-i18n="project_lov8_title"></h1>
<p>A fantasy console built with LÖVE2D, featuring a sandboxed environment for developing games within strict limitations.</p> <p data-i18n="project_lov8_description"></p>
<ul> <ul>
<li>Lua</li> <li>Lua</li>
</ul> </ul>
@ -117,7 +116,7 @@
</section> </section>
<section id="skills"> <section id="skills">
<div class="skills-container"> <div class="skills-container">
<h1>Skills</h1> <h1 data-i18n="skills_title"></h1>
<ul> <ul>
<li>C#</li> <li>C#</li>
<li>C++</li> <li>C++</li>
@ -132,8 +131,8 @@
</section> </section>
<section id="contact"> <section id="contact">
<div class="contact-container"> <div class="contact-container">
<h1>Contact</h1> <h1 data-i18n="contact_title"></h1>
<a href="mailto:patrickschwarzer2000@gmail.com">Interested in working together? Send me an email <i class="fa-solid fa-envelope"></i></a> <a data-i18n="contact_message" href="mailto:patrickschwarzer2000@gmail.com"></a>
</div> </div>
</section> </section>
</main> </main>
@ -145,7 +144,7 @@
<a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a> <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
<a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a> <a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a>
</div> </div>
<p>&copy 2025 Tarion. All rights reserved.</p> <p data-i18n="footer_text"></p>
</footer> </footer>
<script src="script.js"></script> <script src="script.js"></script>

33
languages/de-DE.json Normal file
View file

@ -0,0 +1,33 @@
{
"site_title": "Tarions Portfolio",
"nav_home": "Startseite",
"nav_projects": "Projekte",
"nav_skills": "Fähigkeiten",
"nav_contact": "Kontakt",
"home_greeting": "Hey <span class='wave'>👋</span> Ich bin <span>Tarion</span>.",
"home_subtitle": "Spieleentwickler",
"home_description": "Derzeit entwickle ich ein Spiel mit der Unity-Engine.",
"projects_title": "Projekte",
"skills_title": "Fähigkeiten",
"contact_title": "Kontakt",
"contact_message": "Interesse an einer Zusammenarbeit? Schreib mir eine E-Mail <i class='fa-solid fa-envelope'></i>",
"footer_text": "© 2025 Tarion. Alle Rechte vorbehalten.",
"project_game_engine_title": "Game Engine",
"project_game_engine_description": "Eine benutzerdefinierte C++-Spiel-Engine mit Lua-Skripting-Integration.",
"project_schwarzer_title": "schwarzer-energie.de",
"project_schwarzer_description": "Website für einen Schornsteinfeger- und Energieausweisbetrieb.",
"project_tarion_org_title": "tarion.org",
"project_tarion_org_description": "Persönliches Portfolio zur Präsentation meiner Projekte und Entwicklungsarbeit.",
"project_lov8_title": "LOV-8",
"project_lov8_description": "Eine Fantasy-Konsole, entwickelt mit LÖVE2D, mit einer abgeschotteten Umgebung zum Entwickeln von Spielen unter strengen Einschränkungen."
}

34
languages/en.json Normal file
View file

@ -0,0 +1,34 @@
{
"site_title": "Tarions Portfolio",
"nav_home": "Home",
"nav_projects": "Projects",
"nav_skills": "Skills",
"nav_contact": "Contact",
"home_greeting": "Hey <span class='wave'>👋</span> I'm <span>Tarion</span>.",
"home_subtitle": "Game Programmer",
"home_description": "Currently developing a game using the Unity Engine.",
"projects_title": "Projects",
"skills_title": "Skills",
"contact_title": "Contact",
"contact_message": "Interested in working together? Send me an email <i class='fa-solid fa-envelope'></i>",
"footer_text": "© 2025 Tarion. All rights reserved.",
"project_game_engine_title": "Game Engine",
"project_game_engine_description": "A custom C++ game engine with Lua scripting integration.",
"project_schwarzer_title": "schwarzer-energie.de",
"project_schwarzer_description": "Website for a chimney sweeping and energy certification business.",
"project_tarion_org_title": "tarion.org",
"project_tarion_org_description": "Personal portfolio showcasing my projects and development work.",
"project_lov8_title": "LOV-8",
"project_lov8_description": "A fantasy console built with LÖVE2D, featuring a sandboxed environment for developing games within strict limitations."
}

16
script.js
View file

@ -72,3 +72,19 @@ document.addEventListener("DOMContentLoaded", () => {
}) })
}) })
}) })
// Language support
async function getLanguageData(lang){
const response = await fetch(`languages/${lang}.json`);
return response.json();
}
document.addEventListener("DOMContentLoaded", async () => {
const userLang = navigator.language || navigator.userLanguage;
const langData = await getLanguageData(userLang);
document.querySelectorAll("[data-i18n]").forEach((element) => {
const key = element.getAttribute("data-i18n");
element.innerHTML = langData[key];
});
})