make portfolio the landing page

sitemap/tools.js

@@ -0,0 +1,56 @@
+async function fetchTools() {
+    try {
+        const response = await fetch('tools.json');
+        if (!response.ok) {
+            throw new Error("VPS response is bad");
+        }
+        const tools = await response.json();
+        return tools;
+    } catch (error) {
+        console.error("Failed to fetch tools:", error);
+        return [];
+    }
+};
+
+function renderTools(filteredTools, language = 'en') {
+    const toolList = document.getElementById('toolsMain');
+    toolList.innerHTML = "";
+
+    filteredTools.forEach(tool => {
+        const toolData = {
+            name: language === 'de' ? tool["name-de"] : tool.name,
+            subheader: language === 'de' ? tool["subheader-de"] : tool.subheader,
+            description: language === 'de' ? tool["description-de"] : tool.description,
+            url: tool.url
+        };
+
+        const toolItem = document.createElement("div");
+        toolItem.className = "tool-div";
+
+        toolItem.innerHTML = `
+        <h1 class="tool-header">↬ ${toolData.name} ↫</h1>
+        <h2 class="tool-subhead">${toolData.subheader}</h2>
+        <h2 class="tool-desc">${toolData.description}</h2>
+        <img class="tool-media" src="assets/${tool.name}.png" alt="${tool.name} Image">
+        <a id="visit" class="visit-tool" href="${toolData.url}">Visit "${toolData.name}"!</a>
+        `;
+
+        toolList.appendChild(toolItem);
+    });
+};
+
+async function filterTools(filterType, language = 'en') {
+    const tools = await fetchTools();
+    let filteredTools;
+    if (filterType) {
+        filteredTools = tools;
+    }
+    renderTools(filteredTools, language);
+}
+
+document.getElementById('langauge-selector').addEventListener('change', async (event) => {
+    const selectedLanguage = event.target.value;
+    await filterTools('all', selectedLanguage);
+});
+
+filterTools('all');