From 3e5ee43e8da6cca824ab50e1f1cf99f496dbe929 Mon Sep 17 00:00:00 2001 From: PA4KEV Date: Sun, 18 Feb 2024 00:25:56 +0100 Subject: [PATCH] Create cards for courses. --- src/App.js | 9 +++++++- src/Pages/Radio/RadioMain.js | 2 +- src/Pages/Software/SoftwareMain.js | 25 +++++++++++++++++++++- src/Pages/Software/education.json | 34 ++++++++++++++++++++++++++++++ src/Pages/Software/en/main.md | 21 ------------------ src/Pages/Software/nl/main.md | 21 ------------------ src/UI/Footer.js | 7 +++--- src/UI/Navigation.js | 10 ++++----- src/overrides.scss | 6 ++++++ 9 files changed, 81 insertions(+), 54 deletions(-) create mode 100644 src/Pages/Software/education.json diff --git a/src/App.js b/src/App.js index 6d019f0..910a37e 100644 --- a/src/App.js +++ b/src/App.js @@ -67,6 +67,9 @@ const languageStrings = { japanese: 'Japanese', radio_amateur: 'Radio amateur', software: 'Software', + // Education + courses: 'Courses', + completed: 'Completed', // Navigation portal: 'Portal', language: 'Language', @@ -84,6 +87,9 @@ const languageStrings = { japanese: 'Japans', radio_amateur: 'Radiozendamateur', software: 'Software', + // Education + courses: 'Cursussen', + completed: 'Voltooid', // Navigation portal: 'Portaal', language: 'Taal', @@ -95,7 +101,8 @@ const languageStrings = { }, }; -export function getString(language, key) { +export function getString(key) { + const language = getLanguage(); return languageStrings[language][key] || `{${key}}`; } diff --git a/src/Pages/Radio/RadioMain.js b/src/Pages/Radio/RadioMain.js index 19473d7..1e7d437 100644 --- a/src/Pages/Radio/RadioMain.js +++ b/src/Pages/Radio/RadioMain.js @@ -12,7 +12,7 @@ const RadioMain = () => {

Radio amateur

-

{getString(language, 'fielddays')}

+

{getString('fielddays')}

Links

diff --git a/src/Pages/Software/SoftwareMain.js b/src/Pages/Software/SoftwareMain.js index bde6003..5c9a186 100644 --- a/src/Pages/Software/SoftwareMain.js +++ b/src/Pages/Software/SoftwareMain.js @@ -1,7 +1,8 @@ import React from 'react'; import Emoji from '../../Content/Emoji'; import MarkdownPage from '../markdownPage'; -import { getLanguage } from '../../App'; +import { getLanguage, getString } from '../../App'; +import educationData from './education.json' const SoftwareMain = () => { const language = getLanguage(); @@ -10,6 +11,28 @@ const SoftwareMain = () => {

Software

+
+ +

{getString('courses')}

+
+ {educationData.courses.map((course, index) => ( +
+
+
{course.name}
+

+ {course.sub}, {course.instructor} +
+ {course.intstitution} | certificate +
+ {getString('completed')}: {course.achieveDate} +

+
+
+ {course.duration} hours +
+
+ ))} +
) } diff --git a/src/Pages/Software/education.json b/src/Pages/Software/education.json new file mode 100644 index 0000000..350567b --- /dev/null +++ b/src/Pages/Software/education.json @@ -0,0 +1,34 @@ +{ + "courses": [ + { + "name": "Docker Mastery", + "sub": "Kubernetes + Swarm from a Docker Captain", + "instructor": "Bret Fisher", + "achieveDate": "2021-04-28", + "duration": 21, + "intstitution": "Udemy", + "link": "https://www.udemy.com/course/docker-mastery/", + "certificate": "https://www.matsubara.nl/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg" + }, + { + "name": "Beginning C++ Programming", + "sub": "From Beginner to Beyond", + "instructor": "Dr. Frank Mitropoulos", + "achieveDate": "2020-05-07", + "duration": 46, + "intstitution": "Udemy", + "link": "https://www.udemy.com/course/beginning-c-plus-plus-programming/", + "certificate": "https://www.matsubara.nl/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf" + }, + { + "name": "Learn Linux in 5 Days", + "sub": "and Level Up Your Career", + "instructor": "Jason Cannon", + "achieveDate": "2019-02-03", + "duration": 6.5, + "intstitution": "Udemy", + "link": "https://www.udemy.com/course/learn-linux-in-5-days/", + "certificate": "https://www.matsubara.nl/udemy-certs/UC-0BB6GYJ1.pdf" + } + ] +} \ No newline at end of file diff --git a/src/Pages/Software/en/main.md b/src/Pages/Software/en/main.md index 2f34ef4..0831c86 100644 --- a/src/Pages/Software/en/main.md +++ b/src/Pages/Software/en/main.md @@ -49,24 +49,3 @@ Certification [acquia.com](https://certification.acquia.com/user/18196) 2022 - -Courses -------- - -###### Docker Mastery: Kubernetes + Swarm from a Docker Captain - -[udemy.com](https://www.udemy.com/course/docker-mastery/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg`}) - -2021 - -###### Beginning C++ Programming From Beginner to Beyond - -[udemy.com](https://www.udemy.com/course/beginning-c-plus-plus-programming/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf`}) - -2020 - -###### Learn Linux in 5 Days and Level Up Your Career - -[udemy.com](https://www.udemy.com/course/learn-linux-in-5-days/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-0BB6GYJ1.pdf`}) - -2019 \ No newline at end of file diff --git a/src/Pages/Software/nl/main.md b/src/Pages/Software/nl/main.md index 004cf5a..3daa106 100644 --- a/src/Pages/Software/nl/main.md +++ b/src/Pages/Software/nl/main.md @@ -49,24 +49,3 @@ Certificering [acquia.com](https://certification.acquia.com/user/18196) 2022 - -Cursussen ---------- - -###### Docker Mastery: Kubernetes + Swarm from a Docker Captain - -[udemy.com](https://www.udemy.com/course/docker-mastery/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-19ac22fe-70fa-47bd-804c-83f3aa4ac218.jpg`}) - -2021 - -###### Beginning C++ Programming From Beginner to Beyond - -[udemy.com](https://www.udemy.com/course/beginning-c-plus-plus-programming/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-9f15ebd2-2a9a-489f-b8ca-7e8b175bc12f.pdf`}) - -2020 - -###### Learn Linux in 5 Days and Level Up Your Career - -[udemy.com](https://www.udemy.com/course/learn-linux-in-5-days/)  |  [certificate]({`${process.env.PUBLIC_URL}/udemy-certs/UC-0BB6GYJ1.pdf`}) - -2019 \ No newline at end of file diff --git a/src/UI/Footer.js b/src/UI/Footer.js index b2ec928..1bcf80f 100644 --- a/src/UI/Footer.js +++ b/src/UI/Footer.js @@ -1,19 +1,18 @@ import React from 'react'; import { useTheme } from '../ThemeContext'; import './Footer.css'; -import { getLanguage, getString } from '../App'; +import { getString } from '../App'; const Footer = () => { const { theme } = useTheme(); - const language = getLanguage(); return ( diff --git a/src/UI/Navigation.js b/src/UI/Navigation.js index 5f2cf1f..c2a488a 100644 --- a/src/UI/Navigation.js +++ b/src/UI/Navigation.js @@ -30,20 +30,20 @@ const Navigation = ({ language }) => {
    • -
    • {getString(language, 'japanese')}
      • +
    • {getString('japanese')}
      • -
    • {getString(language, 'radio_amateur')}
      • +
    • {getString('radio_amateur')}
      • -
    • {getString(language, 'software')}
      • +
    • {getString('software')}
    • English
      • diff --git a/src/overrides.scss b/src/overrides.scss index f6bb60e..87429f5 100644 --- a/src/overrides.scss +++ b/src/overrides.scss @@ -98,6 +98,12 @@ body.light { } } +.courses-card { + max-width: 18rem; + margin: 5px; + display: inline-block; +} + // Core variables and mixins // @import "variables"; // @import "mixins"; \ No newline at end of file