Create cards for courses.
This commit is contained in:
PA4KEV
parent
1760ea1977
commit
3e5ee43e8d
@ -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}}`;
|
||||
}
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ const RadioMain = () => {
|
||||
<h1 id="list-intro" className="text-primary">Radio amateur <Emoji symbol="📻" /></h1>
|
||||
<MarkdownPage md={'Radio/' + language + '/main.md'} />
|
||||
|
||||
<h2>{getString(language, 'fielddays')}</h2>
|
||||
<h2>{getString('fielddays')}</h2>
|
||||
<FielddaysTable />
|
||||
|
||||
<h2>Links</h2>
|
||||
|
||||
@ -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 = () => {
|
||||
<article className="main-page">
|
||||
<h1 id="list-intro" className="text-primary">Software <Emoji symbol="🖥️" /></h1>
|
||||
<MarkdownPage md={'Software/' + language + '/main.md'} />
|
||||
<hr />
|
||||
|
||||
<h2>{getString('courses')}</h2>
|
||||
<div class="card-deck">
|
||||
{educationData.courses.map((course, index) => (
|
||||
<div className='card courses-card' key={index}>
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{course.name}</h5>
|
||||
<p class="card-text">
|
||||
<i className='small'>{course.sub}, {course.instructor}</i>
|
||||
<br />
|
||||
<a href={course.link}>{course.intstitution}</a> | <a href={course.certificate}>certificate</a>
|
||||
<br />
|
||||
{getString('completed')}: {course.achieveDate}
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<small class="text-muted">{course.duration} hours</small>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
34
src/Pages/Software/education.json
Normal file
34
src/Pages/Software/education.json
Normal file
@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
@ -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
|
||||
@ -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 (
|
||||
<footer className={`bg-${theme} text-center text-lg-start text-${theme}`}>
|
||||
<div className="container-fluid">
|
||||
<span className="small">{getString(language, 'footer_madewith')}: <a className={`link-${theme}`} href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>, <a className={`link-${theme}`} href="https://fsharp.org/" target="_blank" rel="noopener noreferrer">F#</a>, <a className={`link-${theme}`} href="https://github.com/giraffe-fsharp/Giraffe" target="_blank" rel="noopener noreferrer">Giraffe</a>, <a className={`link-${theme}`} href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> {getString(language, 'and')} <a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> {getString(language, 'on')} <a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</span>
|
||||
<span className="small">{getString('footer_madewith')}: <a className={`link-${theme}`} href="https://reactjs.org/" target="_blank" rel="noopener noreferrer">React</a>, <a className={`link-${theme}`} href="https://fsharp.org/" target="_blank" rel="noopener noreferrer">F#</a>, <a className={`link-${theme}`} href="https://github.com/giraffe-fsharp/Giraffe" target="_blank" rel="noopener noreferrer">Giraffe</a>, <a className={`link-${theme}`} href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer">Bootstrap</a>, <a className={`link-${theme}`} href="https://www.nginx.com/" target="_blank" rel="noopener noreferrer">Nginx</a> {getString('and')} <a className={`link-${theme}`} href="https://www.docker.com/" target="_blank" rel="noopener noreferrer">Docker</a> {getString('on')} <a className={`link-${theme}`} href="https://www.digitalocean.com/" target="_blank" rel="noopener noreferrer">DigitalOcean</a> cloud droplets.</span>
|
||||
<br />
|
||||
<span className="small">{getString(language, 'footer_contentparsed')}: <a className={`link-${theme}`} href="https://github.com/quantizor/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a></span>
|
||||
<span className="small">{getString('footer_contentparsed')}: <a className={`link-${theme}`} href="https://github.com/quantizor/markdown-to-jsx" target="_blank" rel="noopener noreferrer">markdown-to-jsx</a></span>
|
||||
<br /><br />
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -30,20 +30,20 @@ const Navigation = ({ language }) => {
|
||||
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li className="nav-item dropdown">
|
||||
<a className="nav-link dropdown-toggle active" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{getString(language, 'portal')}
|
||||
{getString('portal')}
|
||||
</a>
|
||||
<ul className="dropdown-menu">
|
||||
<li><Link reloadDocument to={currentLanguage + '/japan'} className="dropdown-item">{getString(language, 'japanese')}</Link></li>
|
||||
<li><Link reloadDocument to={currentLanguage + '/japan'} className="dropdown-item">{getString('japanese')}</Link></li>
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
<li><Link reloadDocument to={currentLanguage + '/radio'} className="dropdown-item">{getString(language, 'radio_amateur')}</Link></li>
|
||||
<li><Link reloadDocument to={currentLanguage + '/radio'} className="dropdown-item">{getString('radio_amateur')}</Link></li>
|
||||
<li><hr className="dropdown-divider" /></li>
|
||||
<li><Link reloadDocument to={currentLanguage + '/software'} className="dropdown-item">{getString(language, 'software')}</Link></li>
|
||||
<li><Link reloadDocument to={currentLanguage + '/software'} className="dropdown-item">{getString('software')}</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li className="nav-item dropdown">
|
||||
<a className="nav-link dropdown-toggle active" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
{getString(language, 'language')}
|
||||
{getString('language')}
|
||||
</a>
|
||||
<ul className="dropdown-menu">
|
||||
<li><Link reloadDocument to={generatePath("en")} className="dropdown-item">English</Link></li>
|
||||
|
||||
@ -98,6 +98,12 @@ body.light {
|
||||
}
|
||||
}
|
||||
|
||||
.courses-card {
|
||||
max-width: 18rem;
|
||||
margin: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
// Core variables and mixins
|
||||
// @import "variables";
|
||||
// @import "mixins";
|
||||
Loading…
x
Reference in New Issue
Block a user