Users/th/german english version

Project-Website.code-workspace

@@ -0,0 +1,41 @@
+{
+  "folders": [
+    {
+      "path": "."
+    }
+  ],
+  "settings": {
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.tabSize": 2,
+    "editor.rulers": [80],
+    "files.associations": {
+      "*.css": "tailwindcss"
+    },
+    "tailwindCSS.includeLanguages": {
+      "typescript": "javascript",
+      "typescriptreact": "javascript"
+    },
+    "emmet.includeLanguages": {
+      "javascript": "javascriptreact",
+      "typescript": "typescriptreact"
+    },
+    "files.exclude": {
+      "**/.git": true,
+      "**/.svn": true,
+      "**/.hg": true,
+      "**/CVS": true,
+      "**/.DS_Store": true,
+      "**/node_modules": true
+    }
+  },
+  "extensions": {
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "bradlc.vscode-tailwindcss",
+      "dsznajder.es7-react-js-snippets",
+      "ms-vscode.vscode-typescript-next"
+    ]
+  }
+} 

src/App.tsx

@@ -1,19 +1,23 @@
+import React from "react";
 import "./App.css";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { ContentFrameBox } from "./components/ContentFrameBox";
-import { Route, createRoutesFromElements, RouterProvider, createHashRouter } from "react-router-dom";
 import { DataSec } from "./components/dataSec";
 import { ImPrint } from "./components/imprint";
+import { LanguageProvider } from "./context/LanguageContext";
 
-const router = createHashRouter(
-  createRoutesFromElements(
-    <Route path="/">
-      <Route index element={<ContentFrameBox/>}></Route>
-      <Route path="dataSec" element={<DataSec/>}></Route>
-      <Route path="imprint" element={<ImPrint/>}></Route>
-    </Route>
-  )
-)
+function App() {
+  return (
+    <LanguageProvider>
+      <Router>
+        <Routes>
+          <Route path="/" element={<ContentFrameBox />} />
+          <Route path="/dataSec" element={<DataSec />} />
+          <Route path="/imprint" element={<ImPrint />} />
+        </Routes>
+      </Router>
+    </LanguageProvider>
+  );
+}
 
-export default function App() {
-  return <RouterProvider router={router}></RouterProvider>;
-}
+export default App;

src/components/ContentFrame.tsx

@@ -1,23 +1,28 @@
-import React, { ReactNode } from "react";
+import React from "react";
+import { useLanguage } from "../context/LanguageContext";
+import { translations } from "../translations/translations";
 
 interface Props {
-  title: ReactNode;
-  descriptive_text: ReactNode;
+  projectKey: string;
   link: string;
 }
 
-export default function ContentFrame({ title, descriptive_text, link }: Props) {
+export default function ContentFrame({ projectKey, link }: Props) {
+  const { language } = useLanguage();
+  const project = translations[language].projects[projectKey as keyof typeof translations[typeof language]["projects"]];
+  const { toProject } = translations[language].common;
+
   return (
     <div className="ContentFrame">
-      <div className="contentHeadline">{title}</div>
+      <div className="contentHeadline">{project.title}</div>
       <div className="contentContent">
-        <p>{descriptive_text}</p>
+        <p>{project.description}</p>
       </div>
       <br />
       <br />
       <div className="contentLink">
         <span>
-          <a href={link}>To {title}</a>
+          <a href={link}>{toProject} {project.title}</a>
         </span>
       </div>
     </div>

src/components/ContentFrameBox.tsx

@@ -1,165 +1,112 @@
 import { NavLink } from "react-router-dom";
 import ContentFrame from "./ContentFrame";
+import { LanguageSelector } from "./LanguageSelector";
+import { useLanguage } from "../context/LanguageContext";
+import { translations } from "../translations/translations";
 
 export function ContentFrameBox() {
+  const { language } = useLanguage();
+  const { privacy, imprint } = translations[language].navigation;
+
   return (
     <div className="background">
-        <div className="ContentFrameBox">
-          <header>
-            <div className="headline">Tom DevTech</div>
-          </header>
-          <div className="body">
-            <ContentFrame
-              title={"Robert Assistent"}
-              descriptive_text={
-                "Meet Robert, your helpful assistant with a wide range of tools, including a gallery, a music player, and more. He's not only capable of entertaining you with jokes but also comes with a built-in help menu."
-              }
-              link={"https://github.com/IllusiveCoder/Robert-Assistent"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Colour Changer"}
-              descriptive_text={
-                "This program allows you to experiment with various colors for GUIs. You can input hexadecimal values or choose from a range of color names."
-              }
-              link={"https://github.com/IllusiveCoder/Colourchanger"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Unilexika"}
-              descriptive_text={
-                "Serves as a small notebook for storing and reading text files."}
-              link={"https://github.com/IllusiveCoder/Unilexika"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Updated Unilexika"}
-              descriptive_text={
-                "The updated version now allows editing existing entries, not just reading them."
-              }
-              link={"https://github.com/IllusiveCoder/Updated-Unilexika"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"List App"}
-              descriptive_text={
-                "This app is designed for users who seek quick and free access to websites where they can download books for free. However, 'Developer Options' must be enabled for the installation."
-              }
-              link={"https://github.com/IllusiveCoder/Listenapp"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Link App"}
-              descriptive_text={
-                "Using this app, you can store, delete, and optionally edit links. Ultimately, the app serves the purpose of easily saving and accessing websites."
-              }
-              link={"https://github.com/IllusiveCoder/Link-App"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Pen and Paper Storage System"}
-              descriptive_text={
-                "This application is exclusive to Windows and allows users to create, edit, and delete data about characters and stories using the JSON storage system."}
-              link={"https://github.com/IllusiveCoder/Pen-and-Paper"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Portfolio Website"}
-              descriptive_text={
-                "My old (and first) website as a prototype. Created to showcase all projects in a better organized and concise manner."
-              }
-              link={"https://github.com/IllusiveCoder/Portfolio"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Array Project"}
-              descriptive_text={
-                "This project is an exemplary program aimed at illustrating how elements in arrays, with dimensions ranging from 1 to 3, are read, deleted, and modified in general."
-              }
-              link={"https://github.com/IllusiveCoder/Arrays"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"IC-Autodocker"}
-              descriptive_text={
-                "An interactive Docker exploration tool to playfully approach and experiment with all functionalities."
-              }
-              link={"https://github.com/IllusiveCoder/IC-Autodocker"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"IC-Autodocker Python Package"}
-              descriptive_text={
-                "Full-featured Python package of IC-Autodocker, excluding the GUI."
-              }
-              link={
-                "https://github.com/IllusiveCoder/IC-Autodocker-Python-Package"
-              }
-            ></ContentFrame>
-            <ContentFrame
-              title={"Website"}
-              descriptive_text={
-                "New portfolio website showcasing my projects as a software developer. Built with React and Tailwind CSS."
-              }
-              link={"https://github.com/IllusiveCoder/Project-Website"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Grade Calculator"}
-              descriptive_text={
-                "Calculate your university grade point average with this small program featuring a graphical user interface."
-              }
-              link={"https://github.com/IllusiveCoder/gradecalculator"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Python 3 Course"}
-              descriptive_text={
-                "A self-created Python 3 course for learning the fundamentals of the programming language and mastering related concepts."
-              }
-              link={"https://github.com/IllusiveCoder/Python-Course"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"API Picture Generator"}
-              descriptive_text={
-                "Generates images using an API. For enhanced user experience, a graphical interface was created using PyQT5."
-              }
-              link={"https://github.com/IllusiveCoder/ImageGenerator"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Example Library"}
-              descriptive_text={
-                "This project is a comprehensive code sample library covering Java, Python, Ruby, C/C++, and Web Development (HTML, CSS, JavaScript with React)"
-              }
-              link={"https://github.com/IllusiveCoder/ExampleLibrary"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Learn Programming"}
-              descriptive_text={
-                "The repository is a curated collection of websites and platforms offering tutorials, courses, and information to help individuals learn and enhance their programming skills."
-              }
-              link={"https://github.com/IllusiveCoder/LearnProgramming"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Simple AI Chat Bot"}
-              descriptive_text={
-                "A simple local AI that scans your prioritized folders and creates a markdown documentation file."
-              }
-              link={"https://github.com/tomdevtech/SimpleAI-Chatbot"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"AI API"}
-              descriptive_text={
-                "A sample API project for interacting with a local model, managing models, and handling authorization."
-              }
-              link={"https://github.com/tomdevtech/AI-API"}
-            ></ContentFrame>
-            <ContentFrame
-              title={"Work Time Management"}
-              descriptive_text={
-                "The Work Time Management system enables companies to efficiently track, manage, and analyze employee working hours, ensuring productivity and compliance."
-              }
-              link={"https://github.com/tomdevtech/Work-Time-Mgt"}
-            ></ContentFrame>
-          </div>
-          <footer className="footer">
-            <NavLink className="footerElement" to={"/dataSec"}>
-              Privacy
-            </NavLink>
-            <NavLink className="footerElement" to={"/imprint"}>
-              Imprint
-            </NavLink>
-            <br/><br/>
-          </footer>
+      <LanguageSelector />
+      <div className="ContentFrameBox">
+        <header>
+          <div className="headline">Tom DevTech</div>
+        </header>
+        <div className="body">
+          <ContentFrame
+            projectKey="robert"
+            link={"https://github.com/IllusiveCoder/Robert-Assistent"}
+          />
+          <ContentFrame
+            projectKey="colourChanger"
+            link={"https://github.com/IllusiveCoder/Colourchanger"}
+          />
+          <ContentFrame
+            projectKey="unilexika"
+            link={"https://github.com/IllusiveCoder/Unilexika"}
+          />
+          <ContentFrame
+            projectKey="updatedUnilexika"
+            link={"https://github.com/IllusiveCoder/Updated-Unilexika"}
+          />
+          <ContentFrame
+            projectKey="listApp"
+            link={"https://github.com/IllusiveCoder/Listenapp"}
+          />
+          <ContentFrame
+            projectKey="linkApp"
+            link={"https://github.com/IllusiveCoder/Link-App"}
+          />
+          <ContentFrame
+            projectKey="penAndPaper"
+            link={"https://github.com/IllusiveCoder/Pen-and-Paper"}
+          />
+          <ContentFrame
+            projectKey="portfolio"
+            link={"https://github.com/IllusiveCoder/Portfolio"}
+          />
+          <ContentFrame
+            projectKey="arrayProject"
+            link={"https://github.com/IllusiveCoder/Arrays"}
+          />
+          <ContentFrame
+            projectKey="icAutodocker"
+            link={"https://github.com/IllusiveCoder/IC-Autodocker"}
+          />
+          <ContentFrame
+            projectKey="icAutodockerPython"
+            link={"https://github.com/IllusiveCoder/IC-Autodocker-Python-Package"}
+          />
+          <ContentFrame
+            projectKey="website"
+            link={"https://github.com/IllusiveCoder/Project-Website"}
+          />
+          <ContentFrame
+            projectKey="gradeCalculator"
+            link={"https://github.com/IllusiveCoder/gradecalculator"}
+          />
+          <ContentFrame
+            projectKey="pythonCourse"
+            link={"https://github.com/IllusiveCoder/Python-Course"}
+          />
+          <ContentFrame
+            projectKey="apiPictureGenerator"
+            link={"https://github.com/IllusiveCoder/ImageGenerator"}
+          />
+          <ContentFrame
+            projectKey="exampleLibrary"
+            link={"https://github.com/IllusiveCoder/ExampleLibrary"}
+          />
+          <ContentFrame
+            projectKey="learnProgramming"
+            link={"https://github.com/IllusiveCoder/LearnProgramming"}
+          />
+          <ContentFrame
+            projectKey="simpleAIChatBot"
+            link={"https://github.com/tomdevtech/SimpleAI-Chatbot"}
+          />
+          <ContentFrame
+            projectKey="aiAPI"
+            link={"https://github.com/tomdevtech/AI-API"}
+          />
+          <ContentFrame
+            projectKey="workTimeManagement"
+            link={"https://github.com/tomdevtech/Work-Time-Mgt"}
+          />
         </div>
+        <footer className="footer">
+          <NavLink className="footerElement" to={"/dataSec"}>
+            {privacy}
+          </NavLink>
+          <NavLink className="footerElement" to={"/imprint"}>
+            {imprint}
+          </NavLink>
+          <br/><br/>
+        </footer>
+      </div>
     </div>
   );
 }