Add langualges

README.md

@@ -2,7 +2,7 @@
 ## 💼 JavaScript Software Developer
 
 ### 📝 Profile
-JavaScript developer. Working in web industry as developer since 2011. Highly skilled at solving issues, implementing new technologies, supporting un-supportable code, refactoring huge chunks of code, developing unit and integration tests, deciding project structure and architecture, communicating with people in pleasing manner. More thinking, less writing. Programming is about automatization, not about typing.
+With more than 10 years experience in the web industry, I specialize in JavaScript development since 2011. My skill set isn't just about coding; it's about providing holistic solutions. From troubleshooting complex issues to pioneering the implementation of cutting-edge technologies, I have a proven track record of delivering robust, scalable, and maintainable solutions. My expertise extends to reviving legacy codebases, efficiently refactoring extensive lines of code, and putting together rigorous unit and integration tests. I take a thoughtful approach to software architecture and can readily adapt or establish project structures that set the foundation for successful long-term development. In essence, my philosophy is: "More thinking, less writing." I believe that the core of programming is about automation and problem-solving, not just churning out lines of code. Intrigued? Let's talk about how I can add value to your team or project.
 
 ### 🛠 Work Experience
 - **Web Team Lead** at *Trinetix* (2023 - now)

scripts/generate-md.js

@@ -11,7 +11,7 @@ fs.readFile(jsonFilePath, "utf8", (err, data) => {
     return;
   }
 
-  const cvData = JSON.parse(data);
+  const cvData = JSON.parse(data)['en'];
 
   // Initialize an array to hold the lines of the Markdown file
   let mdLines = [];

src/components/CV.tsx

@@ -1,22 +1,75 @@
-import React from "react";
+import React, { useState } from "react";
 import data from "../data/info.json";
+import { LANGUAGES, SUPPORTED_LANGUAGES } from "../types/common";
+
+const languageLabels = {
+  [LANGUAGES.en]: "Eng",
+  [LANGUAGES.uk]: "Укр",
+};
+
+const sectionLabels = {
+  [LANGUAGES.en]: {
+    details: "Details",
+    skills: "Skills",
+    profile: "Profile",
+    experience: "Experience",
+    education: "Education",
+    languages: "Languages",
+    hobbies: "Hobbies",
+  },
+  [LANGUAGES.uk]: {
+    details: "Деталі",
+    skills: "Навички",
+    profile: "Профіль",
+    experience: "Досвід",
+    education: "Освіта",
+    languages: "Мови",
+    hobbies: "Хобі",
+  },
+};
+
 
 const CV = () => {
+  const language = window.location.search.split("=")[1] || window.navigator.language.split("-")[0] || LANGUAGES.en;
+  const [locale, setLocale] = useState(SUPPORTED_LANGUAGES.includes(language) ? language : "en");
+
+  const updateLanguage = (lang: string) => {
+    setLocale(lang);
+    const url = new URL(window.location.href);
+    url.searchParams.set('lang', lang);
+    window.history.replaceState(null, "", url.toString());
+  };
+
   return (
     <div className="container mx-auto p-4 sm:p-8">
-      <div className="border-b-2 mb-4 pb-4">
+      <div className="border-b-2 mb-4 pb-4 flex justify-between">
+        <div>
         <h1 className="prose prose-xl text-4xl md:text-6xl font-bold uppercase mb-4">
-          {data.name}
+          {data[locale].name}
         </h1>
-        <p className="text-lg sm:text-xl">{data.title}</p>
+        <p className="text-lg sm:text-xl">{data[locale].title}</p>
+        </div>
+        <div>
+          <div className="flex space-x-4 text-lg">
+            {SUPPORTED_LANGUAGES.map((lang, idx) => (
+              <>
+              {idx > 0 && <span>|</span>}
+              <a href="#" onClick={() => updateLanguage(lang)} className={locale === lang ? "text-gray-500" : "text-blue-500 font-bold underline"}>{lang}</a>
+              </>
+
+            ))}
+          </div>
+        </div>
       </div>
 
       <div className="flex flex-col sm:flex-row">
         <div className="w-full sm:w-1/3 border-r-0 sm:border-r-2 pr-0 sm:pr-4 pb-4 sm:pb-0">
           <div className="mb-6">
-            <h2 className="text-2xl font-semibold mb-4 w-full">Details</h2>
+            <h2 className="text-2xl font-semibold mb-4 w-full">
+              {sectionLabels[locale].details}
+            </h2>
             <ul className="list-inside">
-              {data.details.map((detail, index) => (
+              {data[locale].details.map((detail, index) => (
                 <li key={index} className="items-center mb-2">
                   <h3 className="font-semibold text-lg">{detail.label}:</h3>
                   {detail.link ? (
@@ -32,9 +85,11 @@ const CV = () => {
           </div>
 
           <div>
-            <h2 className="text-2xl font-semibold mb-4">Skills</h2>
+            <h2 className="text-2xl font-semibold mb-4">
+              {sectionLabels[locale].skills}
+            </h2>
 
-            {data.skills.map(({ category, skills }, index) => (
+            {data[locale].skills.map(({ category, skills }, index) => (
               <div key={index} className="mb-4">
                 <h3 className="text-lg font-semibold mb-2">{category}:</h3>
                 <ul
@@ -54,14 +109,18 @@ const CV = () => {
 
         <div className="w-full sm:w-2/3 pl-0 sm:pl-4 space-y-2 sm:space-y-6">
           <div className="mb-4">
-            <h2 className="text-2xl font-semibold">Profile</h2>
-            <p className="sm:text-md p-2">{data.profile}</p>
+            <h2 className="text-2xl font-semibold">
+              {sectionLabels[locale].profile}
+            </h2>
+            <p className="sm:text-md p-2">{data[locale].profile}</p>
           </div>
 
           <div className="space-y-2 sm:space-y-2">
-            <h2 className="text-2xl font-semibold">Experience</h2>
+            <h2 className="text-2xl font-semibold">
+              {sectionLabels[locale].experience}
+            </h2>
 
-            {data.jobs.map(({ company, description, title, years }, index) => (
+            {data[locale].jobs.map(({ company, description, title, years }, index) => (
               <div key={index} className="bg-white p-4 rounded-lg shadow-md">
                 <div className="flex justify-between items-start mb-2">
                   <span className="text-xl font-bold">{title}</span>
@@ -80,8 +139,10 @@ const CV = () => {
           </div>
 
           <div className="space-y-2 sm:space-y-2">
-            <h2 className="text-2xl font-semibold">Education</h2>
-            {data.education.map(({ degree, school, years }, index) => (
+            <h2 className="text-2xl font-semibold">
+              {sectionLabels[locale].education}
+            </h2>
+            {data[locale].education.map(({ degree, school, years }, index) => (
               <div key={index} className="p-2">
                 <div className="mb-2">
                   <span className="text-xl font-bold">{degree}</span>
@@ -97,8 +158,10 @@ const CV = () => {
           </div>
 
           <div className="space-y-2 sm:space-y-2">
-            <h2 className="text-2xl font-semibold">Languages</h2>
-            {data.languages.map(({ language, level }, index) => (
+            <h2 className="text-2xl font-semibold">
+              {sectionLabels[locale].languages}
+            </h2>
+            {data[locale].languages.map(({ language, level }, index) => (
               <div key={index} className="p-2">
                 <div className="mb-2">
                   <span className="text-xl font-bold">{language}</span>
@@ -111,8 +174,10 @@ const CV = () => {
           </div>
 
           <div className="mb-2">
-            <h2 className="text-2xl font-semibold">Hobbies</h2>
-            <p className="sm:text-md p-2">{data.hoobies}</p>
+            <h2 className="text-2xl font-semibold">
+              {sectionLabels[locale].hobbies}
+            </h2>
+            <p className="sm:text-md p-2">{data[locale].hoobies}</p>
           </div>
         </div>
       </div>