From 7f6f054b2c5a210f96c31dfee8fbac52cd492eb0 Mon Sep 17 00:00:00 2001
From: Pierre Jarriges <pierre.jarriges@tutanota.com>
Date: Fri, 16 Apr 2021 09:40:49 +0200
Subject: [PATCH] wip:new education programm
---
build.js | 43 +-
data/nginx/app.conf | 28 +-
public/education/education.js | 744 ++-------------
.../game-studio-club/game-studio-club.js | 850 ++++++++++++++++++
public/education/game-studio-club/index.html | 35 +
public/style/pages/education/education.css | 6 +-
.../game-studio-club/game-studio-club.css | 3 +
public/style/style.css | 294 +-----
.../education/components/game-studio-club.js | 531 ++++++-----
src/pages/education/education.js | 111 ++-
src/pages/education/education.scss | 593 ++++++------
src/pages/education/index.js | 2 -
.../game-studio-club/game-studio-club.js | 197 ++++
.../game-studio-club/game-studio-club.scss | 295 ++++++
.../subpages/game-studio-club/index.js | 5 +
.../subpages/game-studio-club/meta.json | 23 +
16 files changed, 2203 insertions(+), 1557 deletions(-)
create mode 100644 public/education/game-studio-club/game-studio-club.js
create mode 100644 public/education/game-studio-club/index.html
create mode 100644 public/style/pages/education/subpages/game-studio-club/game-studio-club.css
create mode 100644 src/pages/education/subpages/game-studio-club/game-studio-club.js
create mode 100644 src/pages/education/subpages/game-studio-club/game-studio-club.scss
create mode 100644 src/pages/education/subpages/game-studio-club/index.js
create mode 100644 src/pages/education/subpages/game-studio-club/meta.json
diff --git a/build.js b/build.js
index 19beddf..56588f3 100644
--- a/build.js
+++ b/build.js
@@ -185,7 +185,7 @@ function createPages(rootdir, destdir) {
page.write(getPageHtml(p, pageMeta));
if (fs.existsSync(`${fPath}/subpages`)) {
- createPages(`${fPath}/subpages`, targetDirPath)
+ createPages(`${fPath}/subpages`, targetDirPath);
}
}
@@ -211,44 +211,3 @@ function createPages(rootdir, destdir) {
}
createPages(`${curDir}/src/pages`, `${curDir}/public`);
-
-// const pages = fs.readdirSync(`${curDir}/src/pages`);
-
-// for (const p of pages) {
-// const fPath = `${curDir}/src/pages/${p}`;
-// const targetDirPath = `${curDir}/public/${p}`;
-
-// if (!fs.existsSync(targetDirPath)) {
-// fs.mkdirSync(targetDirPath);
-// }
-
-// const b = browserify();
-
-// b.add(fPath)
-// .bundle()
-// .pipe(fs.createWriteStream(`${targetDirPath}/${p}.js`));
-
-// const page = fs.createWriteStream(`${targetDirPath}/index.html`);
-// const pageMeta = JSON.parse(fs.readFileSync(`${fPath}/meta.json`, "utf-8"));
-// page.write(getPageHtml(p, pageMeta));
-// }
-
-// // If pages have been deleted in source, remove them in output directory too.
-// for (const dir of fs.readdirSync(`${curDir}/public`).filter(f => {
-// if (build_conf.protected_dirs.includes(f)) return false;
-// const stats = fs.statSync(`${curDir}/public/${f}`);
-// return stats.isDirectory();
-// })) {
-// if (!pages.includes(dir)) {
-// const dPath = `${curDir}/public/${dir}`;
-// try {
-// const nestedFiles = fs.readdirSync(dPath);
-// for (const nf of nestedFiles) {
-// fs.unlinkSync(`${dPath}/${nf}`);
-// }
-// fs.rmdirSync(dPath);
-// } catch (error) {
-// console.error(error);
-// }
-// }
-// }
diff --git a/data/nginx/app.conf b/data/nginx/app.conf
index e26671f..166ca0b 100644
--- a/data/nginx/app.conf
+++ b/data/nginx/app.conf
@@ -8,19 +8,19 @@ server {
root /var/www/certbot;
}
- location / {
- return 301 https://$host$request_uri;
- }
+ # location / {
+ # return 301 https://$host$request_uri;
+ # }
}
-server {
- server_name kuadrado-software.fr www.kuadrado-software.fr;
- listen 443 ssl;
- root /usr/share/nginx/html;
- index index.html index.htm;
- server_tokens off;
- ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
- ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
- include /etc/letsencrypt/options-ssl-nginx.conf;
- ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
-}
\ No newline at end of file
+# server {
+# server_name kuadrado-software.fr www.kuadrado-software.fr;
+# listen 443 ssl;
+# root /usr/share/nginx/html;
+# index index.html index.htm;
+# server_tokens off;
+# ssl_certificate /etc/letsencrypt/live/kuadrado-software.fr/fullchain.pem;
+# ssl_certificate_key /etc/letsencrypt/live/kuadrado-software.fr/privkey.pem;
+# include /etc/letsencrypt/options-ssl-nginx.conf;
+# ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
+# }
\ No newline at end of file
diff --git a/public/education/education.js b/public/education/education.js
index 7bf875b..7caba15 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -121,713 +121,151 @@ module.exports = WebPage;
},{}],5:[function(require,module,exports){
"use strict";
-const { images_url } = require("../../../../constants");
+const { images_url } = require("../../../constants");
+const WebPage = require("../../lib/web-page");
+// const GameStudioClub = require("./components/game-studio-club");
+// const Popularization = require("./components/popularization");
-const GAMEDEV_THEMES = [
- {
- title: "Dessin et création 2D",
- image: "learning_theme_2d.png",
- details: [
- "Création de décors et de personnages",
- "Dessin sur ordinateur, pixel art, vectoriel",
- "Animations 2D",
- ],
- },
- {
- title: "Musique et sons",
- image: "learning_theme_sound.png",
- details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
- },
+const EDU_THEMES = [
{
- title: "Écriture",
- image: "learning_theme_write.png",
- details: [
- "Écrire une histoire, construire une narration",
- "Imaginer des mondes et des personnages",
- ],
- },
- {
- title: "Conception",
+ title: "Game Studio Club",
+ description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
image: "learning_theme_conception.png",
- details: [
- "Concevoir les différents éléments qui composent le jeu",
- "Développer les mécanismes de gameplay",
- ],
+ pageUrl: "game-studio-club",
},
{
title: "Programmation",
+ description: "Vous avez une idée de projet à réaliser en programmation ou vous êtes simplement curieux ? Apprenez à programmer avec différent langages, pour du web du logiciel ou du jeu vidéo.",
image: "learning_theme_coding.png",
- details: [
- "Apprendre pas à pas à coder avec différents langages de programmation",
- "Découvrir les bases du web en créant des mini-jeux en lignes",
- ],
+ pageUrl: "coding",
},
{
- title: "Mathématiques",
- image: "learning_theme_math.png",
- comment:
- "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
- details: [
- "Algorithmie",
- "Logique (algèbre booléen)",
- "Géométrie",
- "Trigonométrie",
- "Algèbre linéaire",
- "Repères 2D / 3D",
- "Vecteurs 2D / 3D",
- "Newton",
- "...",
- ],
+ title: "Dessin numérique et animation 2D",
+ description: "Maîtriser des logiciels libres de création graphique 2D et d'animation.",
+ image: "learning_theme_2d.png",
+ pageUrl: "2d",
},
{
- title: "Travail d'équipe",
- image: "learning_theme_team.png",
- comment: `
- <em>
- Faire son jeu tout seul c'est bien mais ça peut être long !
- <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
- </em>`,
- details: ["Gestion de projet", "Méthodologie", "Communication"],
+ title: "Maths et physiques",
+ description: "Fâché avec les maths ? Aborder les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
+ image: "learning_theme_math.png",
+ pageUrl: "math",
},
{
- title: "Logiciels libres, GNU/Linux",
- image: "learning_theme_linux.png",
- comment:
- "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
- details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
+ title: "Musique et sons électroniques",
+ description: "Maîtriser des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
+ image: "learning_theme_sound.png",
+ pageUrl: "sound",
},
+ {
+ title: "Aide informatique générale",
+ description: "Perdu avec votre ordinateur, les logicels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
+ image: "learning_theme_pc.png",
+ pageUrl: "popularization"
+ }
];
-class GameStudioClub {
+class EducationPage extends WebPage {
+
render() {
return {
- tag: "section",
+ tag: "div",
+ id: "education-page",
typeof: "EducationalOrganization",
contents: [
{
tag: "div",
- class: "title-banner game-banner",
- id: "game-studio-club", // anchor id
- contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
- },
- // {
- // tag: "div",
- // class: "special-announcement",
- // contents: [
- // {
- // tag: "div",
- // class: "page-contents-center",
- // contents: [
- // {
- // tag: "p",
- // contents: `
- // Démarrage des séances à partir du <blue>1er Mars 2021</blue>
- // `,
- // },
- // ],
- // },
- // ],
- // },
- {
- tag: "div",
- class: "section-contents page-contents-center",
+ class: "page-header logo-left",
contents: [
{
tag: "div",
- class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents:
- "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
- property: "headline",
- },
- {
- tag: "strong",
- contents:
- "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
- },
- {
- tag: "p",
- contents:
- "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "practical-infos",
+ class: "page-contents-center grid-wrapper",
contents: [
{
tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Ça se passe où ?" },
- {
- tag: "span",
-
- contents:
- "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
+ class: "logo",
contents: [
- { tag: "strong", contents: "Pour qui ?" },
{
- tag: "span",
- contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
- <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
- `,
+ tag: "img",
+ alt: "image brain",
+ src: `${images_url}brain.svg`,
},
],
},
+ { tag: "h1", contents: "Pédagogie" },
{
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
+ tag: "p",
+ contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
},
],
},
+ ],
+ },
+ {
+ tag: "div",
+ class: "title-banner",
+ },
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
{
- tag: "div",
- class: "list-wrapper",
- property: "hasPart",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- contents: GAMEDEV_THEMES.map(li => {
- return {
- tag: "li",
- class: "learning-theme",
- typeof: "ListItem",
- contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
- },
- {
- tag: "div",
- class: "details",
- property: "description",
- contents: [
- li.comment && {
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- },
- ],
- };
- }),
- },
- ],
+ tag: "p",
+ class: "edu-pitch",
+ contents: `La pédagogie est un des objectifs majeurs de Kuadrado Software. <br />
+ L'informatique est aujourd'hui un élément incontournable de notre société et j'ai la conviction
+ qu'il est fondamental de pouvoir accéder de façon simple à une forme d'apprentissage et de partage de connaissances.<br />
+ Je propose donc des séances d'enseignement autour des sujets que je suis en position de transmettre en tant que développeur et artiste.`
},
{
- tag: "div",
- class: "infos-inscriptions full-row",
- property: "about",
- contents: [
- {
- tag: "div",
- class: "groups",
+ tag: "ul",
+ class: "edu-themes",
+ contents: EDU_THEMES.map(theme => {
+ return {
+ tag: "li",
+ class: "edu-theme",
contents: [
{
- tag: "h3",
- contents: "Groupes",
- },
- {
- tag: "p",
- contents:
- "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mardi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mercredi" },
- {
- tag: "td",
- contents: "14h - 17h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "p",
- contents: `
- Les séances sont accessibles sur des plages horaires de 3 heures,
- mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
- ils ne sont pas obligés de rester les 3 heures.
- <br><br>
- Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
- adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
- `,
- },
- ],
- },
- {
- tag: "div",
- class: "pricing",
- contents: [
- {
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
- Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents: "Abonnement 1 mois",
- },
- {
- tag: "td",
- contents: "(4 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>60€</blue></b>",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents:
- "Abonnement 1 trimestre",
- },
- {
- tag: "td",
- contents: "(12 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>160€</blue></b>",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class:"documents",
+ tag: "a",
+ href: theme.pageUrl,
contents: [
- {
- tag: "div",
- contents: "Télécharger la fiche d'inscription",
- },
- {
- tag:"div",
- class: "links",
- contents: [
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
- contents: "PDF",
- },
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.odt",
- contents: "Libre Office",
- },
- ]
- }
-
- ],
- },
- ],
- },
- ],
+ { tag: "h3", contents: theme.title },
+ { tag: "img", class: "pixelated", src: `${images_url}/${theme.image}` },
+ { tag: "p", contents: theme.description },
+ ]
+ }
+
+ ]
+ }
+ })
},
{
tag: "div",
- class: "teacher",
- contents: [
-
- {
- tag: "div",
- class: "teacher-card",
- contents: [
- {
- tag: "h3",
- contents: "Animé par",
- },
- {
- tag: "div",
- class: "pic",
- contents: [
- {
- tag: "img",
- src:
- "/assets/images/pijar_profile_lt_square.png",
- },
- ],
- },
- {
- tag:"div",
- class:"infos-text",
- contents: [
- {
- tag:"h4",
- contents: "Pierre Jarriges"
- },
- {
- tag: "p",
- contents: "Développeur jeu vidéo, auteur BD, compositeur."
- }
- ]
- }
- ],
- },
- ],
+ contents: "Pour qui ? Tout le monde à partir de 12 ans, ados ou adultes."
},
- ],
- },
- ],
- };
- }
-}
-
-module.exports = GameStudioClub;
-
-},{"../../../../constants":2}],6:[function(require,module,exports){
-"use strict";
-
-const { images_url } = require("../../../../constants");
-
-const VULGARISATION_THEMES = [
- {
- title: "Qu'est-ce qui se passe dans mon ordinateur ?",
- image: "learning_theme_pc.png",
- details: [
- "Répondre aux questions sur l'informatique de tous les jours",
- "L'organisation des fichiers",
- "Le navigateur web et les logiciels usuels",
- "Le système d'exploitation",
- ],
- },
- {
- title: "GNU/Linux, le monde du libre",
- image: "learning_theme_linux.png",
- details: [
- "Apprendre à installer Linux",
- "Qu'est-ce qu'un logiciel libre ? Quels sont les enjeux ?",
- ],
- },
- {
- title: "Comment fonctionne le web ?",
- image: "learning_theme_web.png",
- details: [
- "De quoi est fait le réseau internet ?",
- "Comment fonctionnent les différents services que nous utilisons ?",
- "Qu'est-ce qu'un cloud ?",
- ],
- },
- {
- title: "Le langages des machines",
- image: "learning_theme_coding.png",
- details: [
- "Qu'est-ce qu'un langage de programmation",
- "À quoi ça sert ?",
- "Les métiers du développement informatique",
- ],
- },
- {
- title: "Les coulisses du jeu vidéo",
- image: "learning_theme_2d.png",
- details: [
- "De quoi sont fait les jeux vidéos ?",
- "Quels sont les outils ?",
- "Les métiers du jeu vidéo",
- "Du pixelart à l'industrie lourde",
- "Qu'est-ce qu'un moteur de jeu ?",
- ],
- },
-];
-
-class Popularization {
- render() {
- return {
- tag: "section",
- typeof: "EducationalOrganization",
- contents: [
- {
- tag: "div",
- class: "title-banner popu-banner",
- id: "popularization", // anchor id
- contents: [
- { tag: "h2", contents: "Vulgarisation numérique", property: "name" },
- ],
- },
- {
- tag: "div",
- class: "section-contents page-contents-center",
- contents: [
{
tag: "div",
- class: "full-row",
- contents: [
- {
- tag: "h3",
- class: "big",
- contents: "<blue>S'approprier</blue> l'informatique",
- property: "headline",
- },
- {
- tag: "strong",
- contents:
- "Pour <blue>découvrir et échanger</blue> autour des <blue>outils numériques</blue> que nous utilisons tous les jours !",
- property: "alternativeHeadline",
- },
- {
- tag: "p",
- contents:
- "<em>Des animations d'un journée ouvertes à tous organisées en partenariat avec les structures demandeuses</em>",
- property: "description",
- },
- ],
+ contents: "Ou ça ? Dans mon local professionel 32 rue Simon Vialet Vernoux"
},
{
tag: "div",
- class: "practical-infos",
- contents: [
- {
- tag: "div",
- class: "info-item",
- contents: [
- {
- tag: "span",
- contents:
- "Si vous êtes intéressé pour proposer une de ces animations dans votre structure, contactez-nous pour un <b><blue>devis gratuit</blue></b>.",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
+ contents: "Tarfs: 60 bal par mois. Ou 30€/h pour des cours particuliers, visio possible."
},
{
tag: "div",
- class: "list-wrapper",
- contents: [
- {
- tag: "ul",
- class: "learning-themes",
- property: "hasPart",
- contents: VULGARISATION_THEMES.map(li => {
- return {
- tag: "li",
- typeof: "ListItem",
- class: "learning-theme " + li.class,
- contents: [
- {
- tag: "strong",
- class: "title",
- contents: li.title,
- property: "name",
- },
- {
- tag: "img",
- alt: `learning theme image ${li.title}`,
- src: `${images_url}${li.image}`,
- property: "image",
- },
- {
- tag: "div",
- class: "details",
- property: "description",
- contents: [
- {
- tag: "div",
- class: "comment",
- contents: li.comment,
- },
- {
- tag: "ul",
- contents: li.details.map(d => {
- return {
- tag: "li",
- contents: d,
- };
- }),
- },
- ],
- },
- ],
- };
- }),
- },
- ],
+ contents: "Horaires: mardi 17h 18h30, mercredi 15h 16h30, jeudi 17h 18h30"
},
- ],
- },
- ],
- };
- }
-}
-
-module.exports = Popularization;
-
-},{"../../../../constants":2}],7:[function(require,module,exports){
-"use strict";
-
-const { images_url } = require("../../../constants");
-const WebPage = require("../../lib/web-page");
-const GameStudioClub = require("./components/game-studio-club");
-const Popularization = require("./components/popularization");
-
-class EducationPage extends WebPage {
-
- render() {
- return {
- tag: "div",
- id: "education-page",
- contents: [
- {
- tag: "div",
- class: "page-header logo-left",
- contents: [
{
tag: "div",
- class: "page-contents-center grid-wrapper",
- contents: [
- {
- tag: "div",
- class: "logo",
- contents: [
- {
- tag: "img",
- alt: "image brain",
- src: `${images_url}brain.svg`,
- },
- ],
- },
- { tag: "h1", contents: "Pédagogie" },
- {
- tag: "p",
- contents: `Animations autour de la création de jeux vidéos, vulgarisation numérique.`,
- },
- ],
+ contents: "Matos informatique fournis sur place, on peut amener le sien si on veut."
},
- ],
+ {
+ tag: "div",
+ contents: "Pour s'inscrire: Me contacter ou passer me voir. Télécharger le ficher d'inscription -> ici"
+ }
+ ]
},
- new GameStudioClub().render(),
- new Popularization().render(),
+
],
};
}
@@ -835,15 +273,13 @@ class EducationPage extends WebPage {
module.exports = EducationPage;
-},{"../../../constants":2,"../../lib/web-page":4,"./components/game-studio-club":5,"./components/popularization":6}],8:[function(require,module,exports){
-"use strict";
-
+},{"../../../constants":2,"../../lib/web-page":4}],6:[function(require,module,exports){
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
runPage(EducationPage);
-},{"../../run-page":9,"./education":7}],9:[function(require,module,exports){
+},{"../../run-page":7,"./education":5}],7:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -855,7 +291,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":3,"./template/template":11}],10:[function(require,module,exports){
+},{"./lib/object-html-renderer":3,"./template/template":9}],8:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
@@ -966,7 +402,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],11:[function(require,module,exports){
+},{"../../../constants":2}],9:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -1077,4 +513,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":10}]},{},[8]);
+},{"../../config":1,"../../constants":2,"./components/navbar":8}]},{},[6]);
diff --git a/public/education/game-studio-club/game-studio-club.js b/public/education/game-studio-club/game-studio-club.js
new file mode 100644
index 0000000..d4f746a
--- /dev/null
+++ b/public/education/game-studio-club/game-studio-club.js
@@ -0,0 +1,850 @@
+(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
+function getServerUrl() {
+ return `${location.origin}${
+ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
+ }`;
+}
+
+module.exports = {
+ getServerUrl,
+ website_title: "Kuadrado website template",
+ build: {
+ protected_dirs: ["assets", "style", "articles"],
+ default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
+ },
+};
+
+},{}],2:[function(require,module,exports){
+const { getServerUrl } = require("./config");
+
+module.exports = {
+ images_url: `${getServerUrl()}assets/images/`,
+ articles_url: `${getServerUrl()}articles/`,
+};
+
+},{"./config":1}],3:[function(require,module,exports){
+"use strict";
+
+module.exports = {
+ setRenderCycleRoot(renderCycleRoot) {
+ this.renderCycleRoot = renderCycleRoot;
+ },
+ objectToHtml: function objectToHtml(obj) {
+ const { tag } = obj;
+
+ const node = document.createElement(tag);
+ const excludeKeys = ["tag", "contents", "style_rules", "state"];
+
+ Object.keys(obj)
+ .filter(attr => !excludeKeys.includes(attr))
+ .forEach(attr => {
+ if (attr === "class") {
+ node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
+ } else {
+ node[attr] = obj[attr];
+ }
+ });
+ if (obj.contents && typeof obj.contents === "string") {
+ node.innerHTML = obj.contents;
+ } else {
+ obj.contents &&
+ obj.contents.length > 0 &&
+ obj.contents.forEach(el => {
+ switch (typeof el) {
+ case "string":
+ node.innerHTML = el;
+ break;
+ case "object":
+ node.appendChild(objectToHtml(el));
+ break;
+ }
+ });
+ }
+
+ if (obj.style_rules) {
+ Object.keys(obj.style_rules).forEach(rule => {
+ node.style[rule] = obj.style_rules[rule];
+ });
+ }
+
+ return node;
+ },
+ renderCycle: function () {
+ this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
+ mode: "replace",
+ });
+ },
+ subRender(object, htmlNode, options = { mode: "append" }) {
+ const insert = this.objectToHtml(object);
+ switch (options.mode) {
+ case "append":
+ htmlNode.appendChild(insert);
+ break;
+ case "override":
+ htmlNode.innerHTML = "";
+ htmlNode.appendChild(insert);
+ break;
+ case "insert-before":
+ htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
+ break;
+ case "adjacent":
+ /**
+ * options.insertLocation must be one of:
+ *
+ * afterbegin
+ * afterend
+ * beforebegin
+ * beforeend
+ */
+ htmlNode.insertAdjacentHTML(options.insertLocation, insert);
+ break;
+ case "replace":
+ htmlNode.parentNode.replaceChild(insert, htmlNode);
+ break;
+ case "remove":
+ htmlNode.remove();
+ break;
+ }
+ },
+};
+
+},{}],4:[function(require,module,exports){
+"use strict";
+
+class WebPage {
+ constructor(args) {
+ Object.assign(this, args);
+ }
+}
+
+module.exports = WebPage;
+},{}],5:[function(require,module,exports){
+"use strict";
+
+const { images_url } = require("../../../../constants");
+
+const GAMEDEV_THEMES = [
+ {
+ title: "Dessin et création 2D",
+ image: "learning_theme_2d.png",
+ details: [
+ "Création de décors et de personnages",
+ "Dessin sur ordinateur, pixel art, vectoriel",
+ "Animations 2D",
+ ],
+ },
+ {
+ title: "Musique et sons",
+ image: "learning_theme_sound.png",
+ details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
+ },
+ {
+ title: "Écriture",
+ image: "learning_theme_write.png",
+ details: [
+ "Écrire une histoire, construire une narration",
+ "Imaginer des mondes et des personnages",
+ ],
+ },
+ {
+ title: "Conception",
+ image: "learning_theme_conception.png",
+ details: [
+ "Concevoir les différents éléments qui composent le jeu",
+ "Développer les mécanismes de gameplay",
+ ],
+ },
+ {
+ title: "Programmation",
+ image: "learning_theme_coding.png",
+ details: [
+ "Apprendre pas à pas à coder avec différents langages de programmation",
+ "Découvrir les bases du web en créant des mini-jeux en lignes",
+ ],
+ },
+ {
+ title: "Mathématiques",
+ image: "learning_theme_math.png",
+ comment:
+ "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
+ details: [
+ "Algorithmie",
+ "Logique (algèbre booléen)",
+ "Géométrie",
+ "Trigonométrie",
+ "Algèbre linéaire",
+ "Repères 2D / 3D",
+ "Vecteurs 2D / 3D",
+ "Newton",
+ "...",
+ ],
+ },
+ {
+ title: "Travail d'équipe",
+ image: "learning_theme_team.png",
+ comment: `
+ <em>
+ Faire son jeu tout seul c'est bien mais ça peut être long !
+ <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
+ </em>`,
+ details: ["Gestion de projet", "Méthodologie", "Communication"],
+ },
+ {
+ title: "Logiciels libres, GNU/Linux",
+ image: "learning_theme_linux.png",
+ comment:
+ "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
+ details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
+ },
+];
+
+class GameStudioClub {
+ render() {
+ return {
+ tag: "section",
+ typeof: "EducationalOrganization",
+ contents: [
+ {
+ tag: "div",
+ class: "title-banner game-banner",
+ id: "game-studio-club", // anchor id
+ contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
+ },
+ // {
+ // tag: "div",
+ // class: "special-announcement",
+ // contents: [
+ // {
+ // tag: "div",
+ // class: "page-contents-center",
+ // contents: [
+ // {
+ // tag: "p",
+ // contents: `
+ // Démarrage des séances à partir du <blue>1er Mars 2021</blue>
+ // `,
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ {
+ tag: "div",
+ class: "section-contents page-contents-center",
+ contents: [
+ {
+ tag: "div",
+ class: "full-row",
+ contents: [
+ {
+ tag: "h3",
+ class: "big",
+ contents:
+ "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
+ property: "headline",
+ },
+ {
+ tag: "strong",
+ contents:
+ "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
+ },
+ {
+ tag: "p",
+ contents:
+ "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "practical-infos",
+ contents: [
+ {
+ tag: "div",
+ class: "info-item",
+ property: "about",
+ contents: [
+ { tag: "strong", contents: "Ça se passe où ?" },
+ {
+ tag: "span",
+
+ contents:
+ "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ property: "about",
+ contents: [
+ { tag: "strong", contents: "Pour qui ?" },
+ {
+ tag: "span",
+ contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
+ <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
+ `,
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "info-item",
+ property: "about",
+ contents: [
+ {
+ tag: "strong",
+ contents: "Contact",
+ },
+ {
+ tag: "a",
+ href: "tel:+33475780872",
+ contents: "04 75 78 08 72",
+ property: "telephone",
+ },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ property: "email",
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "list-wrapper",
+ property: "hasPart",
+ contents: [
+ {
+ tag: "ul",
+ class: "learning-themes",
+ contents: GAMEDEV_THEMES.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
+ typeof: "ListItem",
+ contents: [
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ property: "name",
+ },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}${li.image}`,
+ property: "image",
+ },
+ {
+ tag: "div",
+ class: "details",
+ property: "description",
+ contents: [
+ li.comment && {
+ tag: "div",
+ class: "comment",
+ contents: li.comment,
+ },
+ {
+ tag: "ul",
+ contents: li.details.map(d => {
+ return {
+ tag: "li",
+ contents: d,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "infos-inscriptions full-row",
+ property: "about",
+ contents: [
+ {
+ tag: "div",
+ class: "groups",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Groupes",
+ },
+ {
+ tag: "p",
+ contents:
+ "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
+ },
+ {
+ tag: "div",
+ class: "table-wrapper",
+ contents: [
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mardi" },
+ {
+ tag: "td",
+ contents: "16h - 19h",
+ },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Mercredi" },
+ {
+ tag: "td",
+ contents: "14h - 17h",
+ },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ { tag: "td", contents: "Jeudi" },
+ {
+ tag: "td",
+ contents: "16h - 19h",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "p",
+ contents: `
+ Les séances sont accessibles sur des plages horaires de 3 heures,
+ mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
+ ils ne sont pas obligés de rester les 3 heures.
+ <br><br>
+ Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
+ adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
+ `,
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "pricing",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Inscription, fonctionnement et tarifs",
+ },
+ {
+ tag: "p",
+ contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
+ Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ `,
+ },
+ {
+ tag: "div",
+ class: "table-wrapper",
+ contents: [
+ {
+ tag: "table",
+ contents: [
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents: "Abonnement 1 mois",
+ },
+ {
+ tag: "td",
+ contents: "(4 séances)",
+ },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>60€</blue></b>",
+ },
+ ],
+ },
+ {
+ tag: "tr",
+ contents: [
+ {
+ tag: "td",
+ contents:
+ "Abonnement 1 trimestre",
+ },
+ {
+ tag: "td",
+ contents: "(12 séances)",
+ },
+ {
+ tag: "td",
+ contents:
+ "<b><blue>160€</blue></b>",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class:"documents",
+ contents: [
+ {
+ tag: "div",
+ contents: "Télécharger la fiche d'inscription",
+ },
+ {
+ tag:"div",
+ class: "links",
+ contents: [
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.pdf",
+ contents: "PDF",
+ },
+ {
+ tag: "a",
+ class: "download-link",
+ download: "fiche-inscription",
+ href: "/assets/documents/fiche-inscription.odt",
+ contents: "Libre Office",
+ },
+ ]
+ }
+
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "teacher",
+ contents: [
+
+ {
+ tag: "div",
+ class: "teacher-card",
+ contents: [
+ {
+ tag: "h3",
+ contents: "Animé par",
+ },
+ {
+ tag: "div",
+ class: "pic",
+ contents: [
+ {
+ tag: "img",
+ src:
+ "/assets/images/pijar_profile_lt_square.png",
+ },
+ ],
+ },
+ {
+ tag:"div",
+ class:"infos-text",
+ contents: [
+ {
+ tag:"h4",
+ contents: "Pierre Jarriges"
+ },
+ {
+ tag: "p",
+ contents: "Développeur jeu vidéo, auteur BD, compositeur."
+ }
+ ]
+ }
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = GameStudioClub;
+
+},{"../../../../constants":2}],6:[function(require,module,exports){
+"use strict";
+
+const WebPage = require("../../../../lib/web-page");
+const GameStudioClub = require("../../components/game-studio-club");
+
+class GameStudioClubPage extends WebPage {
+
+ render() {
+ return {
+ tag: "div",
+ id: "game-studio-club-page",
+ contents: [
+ new GameStudioClub().render(),
+ ],
+ };
+ }
+}
+
+module.exports = GameStudioClubPage;
+
+},{"../../../../lib/web-page":4,"../../components/game-studio-club":5}],7:[function(require,module,exports){
+"use strict";
+
+const runPage = require("../../../../run-page");
+const GameStudioClubPage = require("./game-studio-club");
+runPage(GameStudioClubPage);
+
+},{"../../../../run-page":8,"./game-studio-club":6}],8:[function(require,module,exports){
+"use strict";
+
+const objectHtmlRenderer = require("./lib/object-html-renderer");
+const Template = require("./template/template");
+
+module.exports = function runPage(PageComponent) {
+ const template = new Template({ page: new PageComponent() });
+ objectHtmlRenderer.setRenderCycleRoot(template);
+ objectHtmlRenderer.renderCycle();
+};
+
+},{"./lib/object-html-renderer":3,"./template/template":10}],9:[function(require,module,exports){
+"use strict";
+
+const { images_url } = require("../../../constants");
+
+const NAV_MENU_ITEMS = [
+ ["/games/", "Jeux"],
+ [
+ "/education/",
+ "Pédagogie",
+ [
+ // submenu
+ ["/education/#game-studio-club", "Game Studio Club"],
+ ["/education/#popularization", "Vulgarisation numérique"],
+ ],
+ ],
+ ["/software-development/", "Software"],
+];
+
+class NavBar {
+ constructor() {
+ this.initEventHandlers();
+ }
+
+ handleBurgerClick() {
+ document.getElementById("nav-menu-list").classList.toggle("responsive-show");
+ }
+
+ initEventHandlers() {
+ window.addEventListener("click", event => {
+ if (
+ event.target.id !== "nav-menu-list" &&
+ !event.target.classList.contains("burger") &&
+ !event.target.parentNode.classList.contains("burger")
+ ) {
+ document.getElementById("nav-menu-list").classList.remove("responsive-show");
+ }
+ });
+ }
+
+ renderHome() {
+ return {
+ tag: "div",
+ class: "home",
+ contents: [
+ {
+ tag: "a",
+ href: "/",
+ contents: [
+ {
+ tag: "img",
+ alt: "Logo Kuadrado",
+ src: `${images_url}logo_kuadrado.svg`,
+ },
+ {
+ tag: "img",
+ alt: "Kuadrado Software",
+ class: "logo-text",
+ src: `${images_url}logo_kuadrado_txt.svg`,
+ },
+ ],
+ },
+ ],
+ };
+ }
+
+ renderMenu(menuItemsArray, isSubmenu = false) {
+ return {
+ tag: "ul",
+ id: "nav-menu-list",
+ class: isSubmenu ? "submenu" : "",
+ contents: menuItemsArray.map(link => {
+ const [href, text, submenu] = link;
+ return {
+ tag: "li",
+ class: !isSubmenu && window.location.pathname === href ? "active" : "",
+ contents: [
+ {
+ tag: "a",
+ href,
+ contents: text,
+ },
+ ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
+ };
+ }),
+ };
+ }
+
+ renderResponsiveBurger() {
+ return {
+ tag: "div",
+ class: "burger",
+ onclick: this.handleBurgerClick.bind(this),
+ contents: [{ tag: "span", contents: "···" }],
+ };
+ }
+
+ render() {
+ return {
+ tag: "nav",
+ contents: [
+ this.renderHome(),
+ this.renderResponsiveBurger(),
+ this.renderMenu(NAV_MENU_ITEMS),
+ ],
+ };
+ }
+}
+
+module.exports = NavBar;
+
+},{"../../../constants":2}],10:[function(require,module,exports){
+"use strict";
+
+const { in_construction } = require("../../config");
+const { images_url } = require("../../constants");
+const NavBar = require("./components/navbar");
+
+class Template {
+ constructor(props) {
+ this.props = props;
+ }
+ render() {
+ return {
+ tag: "main",
+ contents: [
+ {
+ tag: "header",
+ contents: [new NavBar().render()],
+ },
+ in_construction && {
+ tag: "section",
+ class: "warning-banner",
+ contents: [
+ {
+ tag: "strong",
+ class: "page-contents-center",
+ contents: "Site en construction ...",
+ },
+ ],
+ },
+ {
+ tag: "section",
+ id: "page-container",
+ contents: [this.props.page.render()],
+ },
+ {
+ tag: "footer",
+ contents: [
+ {
+ tag: "div",
+ class: "logo",
+ contents: [
+ {
+ tag: "img",
+ alt: `logo Kuadrado`,
+ src: `${images_url}logo_kuadrado.svg`,
+ },
+ {
+ tag: "img",
+ class: "text-logo",
+ alt: "Kuadrado Software",
+ src: `${images_url}logo_kuadrado_txt.svg`,
+ },
+ ],
+ },
+ {
+ tag: "span",
+ contents:
+ "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
+ },
+ {
+ tag: "div",
+ contents: [
+ { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "social",
+ contents: [
+ {
+ tag: "strong",
+ contents: "<blue>Sur les réseaux : </blue>",
+ },
+ {
+ tag: "a",
+ href: "https://www.linkedin.com/company/kuadrado-software",
+ target: "_blank",
+ contents: "in",
+ title: "Linkedin",
+ },
+ {
+ tag: "a",
+ href: "https://twitter.com/KuadradoSoft",
+ target: "_blank",
+ contents: "t",
+ title: "Twitter",
+ style_rules: { fontFamily: "serif" },
+ },
+ ],
+ },
+ {
+ tag: "span",
+ contents: `Copyright © ${new Date()
+ .getFullYear()} Kuadrado Software |
+ Toutes les images du site ont été réalisées par mes soins et peuvent être réutilisées pour un usage personnel.`,
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = Template;
+
+},{"../../config":1,"../../constants":2,"./components/navbar":9}]},{},[7]);
diff --git a/public/education/game-studio-club/index.html b/public/education/game-studio-club/index.html
new file mode 100644
index 0000000..64c1eed
--- /dev/null
+++ b/public/education/game-studio-club/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="fr" prefix="og: https://ogp.me/ns#">
+ <head>
+ <meta charset="utf-8" />
+ <title>Kuadrado Software | Game Studio Club</title>
+ <meta name="description" content="Apprendre à créer un jeu vidéo de A à Z"/>
+ <meta name="author" content="Kuadrado Software" />
+ <meta name="image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+
+ <!-- Open Graph Protocol meta data -->
+ <meta property="og:title" content="Kuadrado Software | Game Studio Club"/>
+ <meta property="og:description" content="Apprendre à créer un jeu vidéo de A à Z"/>
+ <meta property="og:type" content="website" />
+ <meta property="og:url" content="https://kuadrado-software.fr/game-studio-club"/>
+ <meta property="og:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+ <meta property="twitter:image" content="https://kuadrado-software.fr/assets/images/brain.png"/>
+ <meta property="og:locale" content="fr_FR"/>
+ <meta property="og:site_name" content="Kuadrado Software" />
+
+ <!-- English translation not ready yet -->
+ <!-- <meta property="og:locale:alternate" content="en_GB" /> -->
+
+ <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+ <link href="/style/style.css" rel="stylesheet" />
+ <script type="application/ld+json">{"@context":"https://schema.org","type":"WebPage","description":"Apprendre à créer un jeu vidéo de A à Z","image":["https://kuadrado-software.fr/assets/images/brain.svg","https://kuadrado-software.fr/assets/images/brain.png","https://kuadrado-software.fr/assets/images/game_studio_banner.png","https://kuadrado-software.fr/assets/images/popularization_banner.png"],"keywords":"Apprendre informatique jeu vidéo, gamedev, code","name":"Kuadrado Software - Game Studio Club","url":"https://kuadrado-software.fr/education/game-studio/club"}</script>
+ </head>
+ <!-- The vocab attribute defines the standard vocabulary used for RDFa standard.
+ The DOM may contain properties such as "typeof" and "property" accordinly to the schema.org vocabulary -->
+ <body vocab="https://schema.org/">
+ <!-- The H1 tag will be never seen but it's necessary for SEO -->
+ <main><h1 style="visibility: hidden">Kuadrado Software | Game Studio Club</h1></main>
+ </body>
+ <script type="text/javascript" src="./game-studio-club.js"></script>
+</html>
diff --git a/public/style/pages/education/education.css b/public/style/pages/education/education.css
index b56ef64..8c81e7e 100644
--- a/public/style/pages/education/education.css
+++ b/public/style/pages/education/education.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 30 | background-color: $yellow_2;
+ * 25 | background-color: $yellow_2;
* | ^^^^^^^^^
* '
- * src/pages/education/education.scss 30:27 root stylesheet */
+ * src/pages/education/education.scss 25:27 root stylesheet */
body::before {
font-family: "Source Code Pro", "SF Mono", Monaco, Inconsolata, "Fira Mono",
@@ -13,5 +13,5 @@ body::before {
padding: 1em;
margin-bottom: 1em;
border-bottom: 2px solid black;
- content: "Error: Undefined variable.\a \2577 \a 30 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 30:27 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 25 \2502 background-color: $yellow_2;\a \2502 ^^^^^^^^^\a \2575 \a src/pages/education/education.scss 25:27 root stylesheet";
}
diff --git a/public/style/pages/education/subpages/game-studio-club/game-studio-club.css b/public/style/pages/education/subpages/game-studio-club/game-studio-club.css
new file mode 100644
index 0000000..90586b2
--- /dev/null
+++ b/public/style/pages/education/subpages/game-studio-club/game-studio-club.css
@@ -0,0 +1,3 @@
+
+
+/*# sourceMappingURL=game-studio-club.css.map */
diff --git a/public/style/style.css b/public/style/style.css
index 207814c..f129f48 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -796,16 +796,11 @@ main #page-container #education-page .title-banner {
flex-direction: column;
height: 20vw;
min-height: 250px;
+ background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
-main #page-container #education-page .title-banner.game-banner {
- background-image: url("/assets/images/game_studio_banner.png");
-}
-main #page-container #education-page .title-banner.popu-banner {
- background-image: url("/assets/images/popularization_banner.png");
-}
main #page-container #education-page .title-banner h2 {
color: white;
font-size: 2.5em;
@@ -829,289 +824,22 @@ main #page-container #education-page .special-announcement .page-contents-center
font-weight: 600;
margin: 0;
}
-main #page-container #education-page .section-contents {
- padding: 20px 40px 60px;
- display: grid;
- grid-template-columns: auto 1fr;
- gap: 20px;
- height: auto;
-}
-main #page-container #education-page .section-contents .full-row {
- grid-column: 1/span 2;
-}
-main #page-container #education-page .section-contents .practical-infos {
- grid-column: 2;
- grid-row: 2;
- display: flex;
- flex-direction: column;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item {
- display: flex;
- flex-direction: column;
- background-color: white;
- padding: 20px;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item strong {
- margin-bottom: 10px;
- white-space: nowrap;
- color: #6b7880;
-}
-main #page-container #education-page .section-contents .practical-infos .info-item span,
-main #page-container #education-page .section-contents .practical-infos .info-item a {
- font-size: 14px;
-}
-main #page-container #education-page .section-contents .list-wrapper {
- grid-column: 1;
- grid-row: 2;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- display: flex;
- gap: 20px 30px;
- flex-wrap: wrap;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- position: relative;
- border: solid #d4d9dd;
- border-width: 0 2px 2px 0;
- display: flex;
- flex-direction: column;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .title {
- color: #6b7880;
- display: block;
- position: absolute;
- background-color: #fffa;
- padding: 3px 10px;
- width: 100%;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme img {
- width: 100%;
- height: auto;
- image-rendering: pixelated;
- image-rendering: -moz-crisp-edges;
- image-rendering: crisp-edges;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fffe;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 300px;
- height: auto;
- max-height: 0;
- visibility: hidden;
- z-index: 1;
- transition: max-height 0.6s;
- padding: 20px;
- border: solid #d4d9dd;
- border-width: 0 1px 1px 0;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- gap: 10px;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment {
- font-style: italic;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details .comment * {
- color: #6b7880;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul li {
- color: #6b7880;
-}
-main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme:hover .details {
- max-height: 1000px;
- visibility: visible;
-}
-main #page-container #education-page .section-contents .infos-inscriptions {
- display: flex;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups h3,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing h3 {
- margin: 0;
- color: #96a5ae;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
- border: 1px solid #dde;
- border-collapse: collapse;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
- border: 1px solid #dde;
- padding: 10px 20px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents {
- margin-top: 20px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links {
- display: flex;
- gap: 20px;
-}
-main #page-container #education-page .section-contents .infos-inscriptions .groups .documents .links .download-link,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .documents .links .download-link {
- border: 1px solid;
- padding: 8px;
- display: flex;
- margin: 10px 0 0;
- border-radius: 4px;
-}
-main #page-container #education-page .section-contents .teacher {
- grid-column: 1/span 2;
- background: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: row;
- flex-direction: column;
+main #page-container #education-page .edu-pitch {
+ font-size: 18px;
}
-main #page-container #education-page .section-contents .teacher .teacher-card {
- background-color: white;
+main #page-container #education-page .edu-themes {
display: grid;
- grid-template-columns: auto 1fr;
- width: 100%;
+ grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
- padding: 20px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card h3 {
- margin: 0;
- width: 100%;
- color: #96a5ae;
- grid-column: 1/span 2;
}
-main #page-container #education-page .section-contents .teacher .teacher-card .pic img {
- width: 100px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text {
- padding: 0 20px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text h4 {
- color: #4baabb;
- margin: 0;
- font-size: 18px;
-}
-main #page-container #education-page .section-contents .teacher .teacher-card .infos-text p {
- color: #96a5ae;
- display: block;
+main #page-container #education-page .edu-themes .edu-theme {
+ transition: transform 0.3s;
}
-@media screen and (max-width: 900px) {
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- display: block;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- width: 100%;
- margin-bottom: 20px;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
- }
- main #page-container #education-page .section-contents .infos-inscriptions {
- flex-direction: column;
- }
+main #page-container #education-page .edu-themes .edu-theme:hover {
+ transform: scale(1.03);
}
-@media screen and (max-width: 780px) {
- main #page-container #education-page h3.big {
- font-size: 22px;
- }
- main #page-container #education-page .title-banner {
- height: 170px;
- min-height: unset;
- }
- main #page-container #education-page .title-banner h2 {
- font-size: 2em;
- margin: 20px;
- text-shadow: 0 0 4px #000b;
- }
- main #page-container #education-page .section-contents {
- padding: 20px 20px 40px;
- grid-template-columns: 100%;
- }
- main #page-container #education-page .section-contents .full-row {
- grid-column: 1;
- }
- main #page-container #education-page .section-contents .practical-infos {
- grid-column: 1;
- grid-row: 3;
- gap: 10px;
- padding: 10px;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes {
- grid-column: 1;
- grid-row: 2;
- display: block;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme {
- margin-bottom: 20px;
- }
- main #page-container #education-page .section-contents .list-wrapper ul.learning-themes li.learning-theme .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
- main #page-container #education-page .section-contents .infos-inscriptions {
- gap: 10px;
- padding: 10px;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table {
- width: 100%;
- }
- main #page-container #education-page .section-contents .infos-inscriptions .groups .table-wrapper table td,
-main #page-container #education-page .section-contents .infos-inscriptions .pricing .table-wrapper table td {
- border: 1px solid #dde;
- padding: 10px;
- }
- main #page-container #education-page .section-contents .teacher {
- grid-column: 1;
- padding: 20px;
- }
+main #page-container #education-page .edu-themes .edu-theme img {
+ width: 100%;
}
main #page-container #games-page .game-articles article {
display: grid;
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 90e40bb..43f9b96 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -86,7 +86,6 @@ class GameStudioClub {
{
tag: "div",
class: "title-banner game-banner",
- id: "game-studio-club", // anchor id
contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
},
// {
@@ -134,63 +133,63 @@ class GameStudioClub {
},
],
},
- {
- tag: "div",
- class: "practical-infos",
- contents: [
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Ça se passe où ?" },
- {
- tag: "span",
+ // {
+ // tag: "div",
+ // class: "practical-infos",
+ // contents: [
+ // {
+ // tag: "div",
+ // class: "info-item",
+ // property: "about",
+ // contents: [
+ // { tag: "strong", contents: "Ça se passe où ?" },
+ // {
+ // tag: "span",
- contents:
- "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- { tag: "strong", contents: "Pour qui ?" },
- {
- tag: "span",
- contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
- <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
- `,
- },
- ],
- },
- {
- tag: "div",
- class: "info-item",
- property: "about",
- contents: [
- {
- tag: "strong",
- contents: "Contact",
- },
- {
- tag: "a",
- href: "tel:+33475780872",
- contents: "04 75 78 08 72",
- property: "telephone",
- },
- {
- tag: "a",
- href: "mailto:contact@kuadrado-software.fr",
- contents: "contact@kuadrado-software.fr",
- property: "email",
- },
- ],
- },
- ],
- },
+ // contents:
+ // "Dans les locaux,<br/><em>32 rue Simon Vialet, passage du Cheminou<br/>07240 Vernoux en Vivarais</em>",
+ // },
+ // ],
+ // },
+ // {
+ // tag: "div",
+ // class: "info-item",
+ // property: "about",
+ // contents: [
+ // { tag: "strong", contents: "Pour qui ?" },
+ // {
+ // tag: "span",
+ // contents: `Tout le monde à partir de <b><blue>12 ans</blue></b>.
+ // <br><br><b><blue>Ados</blue></b> et <b><blue>adultes</blue></b>.
+ // `,
+ // },
+ // ],
+ // },
+ // {
+ // tag: "div",
+ // class: "info-item",
+ // property: "about",
+ // contents: [
+ // {
+ // tag: "strong",
+ // contents: "Contact",
+ // },
+ // {
+ // tag: "a",
+ // href: "tel:+33475780872",
+ // contents: "04 75 78 08 72",
+ // property: "telephone",
+ // },
+ // {
+ // tag: "a",
+ // href: "mailto:contact@kuadrado-software.fr",
+ // contents: "contact@kuadrado-software.fr",
+ // property: "email",
+ // },
+ // ],
+ // },
+ // ],
+ // },
{
tag: "div",
class: "list-wrapper",
@@ -244,217 +243,217 @@ class GameStudioClub {
},
],
},
- {
- tag: "div",
- class: "infos-inscriptions full-row",
- property: "about",
- contents: [
- {
- tag: "div",
- class: "groups",
- contents: [
- {
- tag: "h3",
- contents: "Groupes",
- },
- {
- tag: "p",
- contents:
- "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mardi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Mercredi" },
- {
- tag: "td",
- contents: "14h - 17h",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- { tag: "td", contents: "Jeudi" },
- {
- tag: "td",
- contents: "16h - 19h",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "p",
- contents: `
- Les séances sont accessibles sur des plages horaires de 3 heures,
- mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
- ils ne sont pas obligés de rester les 3 heures.
- <br><br>
- Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
- adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
- `,
- },
- ],
- },
- {
- tag: "div",
- class: "pricing",
- contents: [
- {
- tag: "h3",
- contents: "Inscription, fonctionnement et tarifs",
- },
- {
- tag: "p",
- contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
- Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
- `,
- },
- {
- tag: "div",
- class: "table-wrapper",
- contents: [
- {
- tag: "table",
- contents: [
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents: "Abonnement 1 mois",
- },
- {
- tag: "td",
- contents: "(4 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>60€</blue></b>",
- },
- ],
- },
- {
- tag: "tr",
- contents: [
- {
- tag: "td",
- contents:
- "Abonnement 1 trimestre",
- },
- {
- tag: "td",
- contents: "(12 séances)",
- },
- {
- tag: "td",
- contents:
- "<b><blue>160€</blue></b>",
- },
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class:"documents",
- contents: [
- {
- tag: "div",
- contents: "Télécharger la fiche d'inscription",
- },
- {
- tag:"div",
- class: "links",
- contents: [
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.pdf",
- contents: "PDF",
- },
- {
- tag: "a",
- class: "download-link",
- download: "fiche-inscription",
- href: "/assets/documents/fiche-inscription.odt",
- contents: "Libre Office",
- },
- ]
- }
+ // {
+ // tag: "div",
+ // class: "infos-inscriptions full-row",
+ // property: "about",
+ // contents: [
+ // {
+ // tag: "div",
+ // class: "groups",
+ // contents: [
+ // {
+ // tag: "h3",
+ // contents: "Groupes",
+ // },
+ // {
+ // tag: "p",
+ // contents:
+ // "Les groupes sont de <b><blue>5 personnes</blue></b> maximum.",
+ // },
+ // {
+ // tag: "div",
+ // class: "table-wrapper",
+ // contents: [
+ // {
+ // tag: "table",
+ // contents: [
+ // {
+ // tag: "tr",
+ // contents: [
+ // { tag: "td", contents: "Mardi" },
+ // {
+ // tag: "td",
+ // contents: "16h - 19h",
+ // },
+ // ],
+ // },
+ // {
+ // tag: "tr",
+ // contents: [
+ // { tag: "td", contents: "Mercredi" },
+ // {
+ // tag: "td",
+ // contents: "14h - 17h",
+ // },
+ // ],
+ // },
+ // {
+ // tag: "tr",
+ // contents: [
+ // { tag: "td", contents: "Jeudi" },
+ // {
+ // tag: "td",
+ // contents: "16h - 19h",
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ // {
+ // tag: "p",
+ // contents: `
+ // Les séances sont accessibles sur des plages horaires de 3 heures,
+ // mais les participants peuvent arriver et repartir à l'heure qu'ils souhaitent,
+ // ils ne sont pas obligés de rester les 3 heures.
+ // <br><br>
+ // Le club est ouvert à toute personne à partir de <b><blue>12 ans</blue></b>,
+ // adolescent ou adulte, et les groupes sont aussi <b><blue>intergénérationnels</blue></b> que possible.
+ // `,
+ // },
+ // ],
+ // },
+ // {
+ // tag: "div",
+ // class: "pricing",
+ // contents: [
+ // {
+ // tag: "h3",
+ // contents: "Inscription, fonctionnement et tarifs",
+ // },
+ // {
+ // tag: "p",
+ // contents: `Vous pouvez vous inscrire dans un des groupes pour un mois ou un trimestre.<br /><br />
+ // Le matériel informatique (pc portable, souris, tablette graphique) est fourni sur place, mais vous pouvez amener votre propre ordinateur portable si vous le souhaitez.
+ // `,
+ // },
+ // {
+ // tag: "div",
+ // class: "table-wrapper",
+ // contents: [
+ // {
+ // tag: "table",
+ // contents: [
+ // {
+ // tag: "tr",
+ // contents: [
+ // {
+ // tag: "td",
+ // contents: "Abonnement 1 mois",
+ // },
+ // {
+ // tag: "td",
+ // contents: "(4 séances)",
+ // },
+ // {
+ // tag: "td",
+ // contents:
+ // "<b><blue>60€</blue></b>",
+ // },
+ // ],
+ // },
+ // {
+ // tag: "tr",
+ // contents: [
+ // {
+ // tag: "td",
+ // contents:
+ // "Abonnement 1 trimestre",
+ // },
+ // {
+ // tag: "td",
+ // contents: "(12 séances)",
+ // },
+ // {
+ // tag: "td",
+ // contents:
+ // "<b><blue>160€</blue></b>",
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ // {
+ // tag: "div",
+ // class:"documents",
+ // contents: [
+ // {
+ // tag: "div",
+ // contents: "Télécharger la fiche d'inscription",
+ // },
+ // {
+ // tag:"div",
+ // class: "links",
+ // contents: [
+ // {
+ // tag: "a",
+ // class: "download-link",
+ // download: "fiche-inscription",
+ // href: "/assets/documents/fiche-inscription.pdf",
+ // contents: "PDF",
+ // },
+ // {
+ // tag: "a",
+ // class: "download-link",
+ // download: "fiche-inscription",
+ // href: "/assets/documents/fiche-inscription.odt",
+ // contents: "Libre Office",
+ // },
+ // ]
+ // }
- ],
- },
- ],
- },
- ],
- },
- {
- tag: "div",
- class: "teacher",
- contents: [
+ // ],
+ // },
+ // ],
+ // },
+ // ],
+ // },
+ // {
+ // tag: "div",
+ // class: "teacher",
+ // contents: [
- {
- tag: "div",
- class: "teacher-card",
- contents: [
- {
- tag: "h3",
- contents: "Animé par",
- },
- {
- tag: "div",
- class: "pic",
- contents: [
- {
- tag: "img",
- src:
- "/assets/images/pijar_profile_lt_square.png",
- },
- ],
- },
- {
- tag:"div",
- class:"infos-text",
- contents: [
- {
- tag:"h4",
- contents: "Pierre Jarriges"
- },
- {
- tag: "p",
- contents: "Développeur jeu vidéo, auteur BD, compositeur."
- }
- ]
- }
- ],
- },
- ],
- },
+ // {
+ // tag: "div",
+ // class: "teacher-card",
+ // contents: [
+ // {
+ // tag: "h3",
+ // contents: "Animé par",
+ // },
+ // {
+ // tag: "div",
+ // class: "pic",
+ // contents: [
+ // {
+ // tag: "img",
+ // src:
+ // "/assets/images/pijar_profile_lt_square.png",
+ // },
+ // ],
+ // },
+ // {
+ // tag:"div",
+ // class:"infos-text",
+ // contents: [
+ // {
+ // tag:"h4",
+ // contents: "Pierre Jarriges"
+ // },
+ // {
+ // tag: "p",
+ // contents: "Développeur jeu vidéo, auteur BD, compositeur."
+ // }
+ // ]
+ // }
+ // ],
+ // },
+ // ],
+ // },
],
},
],
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index 92af28c..05159b0 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -2,8 +2,47 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
-const GameStudioClub = require("./components/game-studio-club");
-const Popularization = require("./components/popularization");
+// const GameStudioClub = require("./components/game-studio-club");
+// const Popularization = require("./components/popularization");
+
+const EDU_THEMES = [
+ {
+ title: "Game Studio Club",
+ description: "Conception, graphisme et animation, programmation, je vous accompagne dans la découverte des techniques pour créer un jeu vidéo de A à Z",
+ image: "learning_theme_conception.png",
+ pageUrl: "game-studio-club",
+ },
+ {
+ title: "Programmation",
+ description: "Vous avez une idée de projet à réaliser en programmation ou vous êtes simplement curieux ? Apprenez à programmer avec différent langages, pour du web du logiciel ou du jeu vidéo.",
+ image: "learning_theme_coding.png",
+ pageUrl: "coding",
+ },
+ {
+ title: "Dessin numérique et animation 2D",
+ description: "Maîtriser des logiciels libres de création graphique 2D et d'animation.",
+ image: "learning_theme_2d.png",
+ pageUrl: "2d",
+ },
+ {
+ title: "Maths et physiques",
+ description: "Fâché avec les maths ? Aborder les notions fondamentales de façon décontractée pour le plaisir de comprendre.",
+ image: "learning_theme_math.png",
+ pageUrl: "math",
+ },
+ {
+ title: "Musique et sons électroniques",
+ description: "Maîtriser des logiciels libres de composition musicales, de synthèse sonore et de prise de son.",
+ image: "learning_theme_sound.png",
+ pageUrl: "sound",
+ },
+ {
+ title: "Aide informatique générale",
+ description: "Perdu avec votre ordinateur ou votre smartphone, les logicels, internet ? Je vous aide pas à pas à comprendre les fondamentaux et à utiliser sereinement la technologie.",
+ image: "learning_theme_pc.png",
+ pageUrl: "popularization"
+ }
+];
class EducationPage extends WebPage {
@@ -11,6 +50,7 @@ class EducationPage extends WebPage {
return {
tag: "div",
id: "education-page",
+ typeof: "EducationalOrganization",
contents: [
{
tag: "div",
@@ -40,8 +80,71 @@ class EducationPage extends WebPage {
},
],
},
- new GameStudioClub().render(),
- new Popularization().render(),
+ {
+ tag: "div",
+ class: "title-banner",
+ },
+ {
+ tag: "div",
+ class: "page-contents-center",
+ contents: [
+ {
+ tag: "p",
+ class: "edu-pitch",
+ contents: `La pédagogie est un des objectifs majeurs de Kuadrado Software. <br />
+ L'informatique est aujourd'hui un élément incontournable de notre société et j'ai la conviction
+ qu'il est fondamental de pouvoir accéder de façon simple à une forme d'apprentissage et de partage de connaissances.<br />
+ Je propose donc des séances d'enseignement autour des sujets que je suis en position de transmettre en tant que développeur et artiste.`
+ },
+ {
+ tag: "ul",
+ class: "edu-themes",
+ contents: EDU_THEMES.map(theme => {
+ return {
+ tag: "li",
+ class: "edu-theme",
+ contents: [
+ {
+ tag: "a",
+ href: theme.pageUrl,
+ contents: [
+ { tag: "h3", contents: theme.title },
+ { tag: "img", class: "pixelated", src: `${images_url}/${theme.image}` },
+ { tag: "p", contents: theme.description },
+ ]
+ }
+
+ ]
+ }
+ })
+ },
+ {
+ tag: "div",
+ contents: "Pour qui ? Tout le monde à partir de 12 ans, ados ou adultes."
+ },
+ {
+ tag: "div",
+ contents: "Ou ça ? Dans mon local professionel 32 rue Simon Vialet Vernoux"
+ },
+ {
+ tag: "div",
+ contents: "Tarfs: 60 bal par mois. Ou 30€/h pour des cours particuliers, visio possible."
+ },
+ {
+ tag: "div",
+ contents: "Horaires: mardi 17h 18h30, mercredi 15h 16h30, jeudi 17h 18h30"
+ },
+ {
+ tag: "div",
+ contents: "Matos informatique fournis sur place, on peut amener le sien si on veut."
+ },
+ {
+ tag: "div",
+ contents: "Pour s'inscrire: Me contacter ou passer me voir. Télécharger le ficher d'inscription -> ici"
+ }
+ ]
+ },
+
],
};
}
diff --git a/src/pages/education/education.scss b/src/pages/education/education.scss
index 7fe2394..ec16f66 100644
--- a/src/pages/education/education.scss
+++ b/src/pages/education/education.scss
@@ -10,12 +10,7 @@
flex-direction: column;
height: 20vw;
min-height: 250px;
- &.game-banner {
- background-image: url("/assets/images/game_studio_banner.png");
- }
- &.popu-banner {
- background-image: url("/assets/images/popularization_banner.png");
- }
+ background-image: url("/assets/images/popularization_banner.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
@@ -40,298 +35,318 @@
}
}
}
- .section-contents {
- padding: 20px 40px 60px;
+
+ .edu-pitch {
+ font-size: 18px;
+ }
+
+ .edu-themes {
display: grid;
- grid-template-columns: auto 1fr;
+ grid-template-columns: 1fr 1fr 1fr;
gap: 20px;
- height: auto;
- .full-row {
- grid-column: 1 / span 2;
- }
- .practical-infos {
- grid-column: 2;
- grid-row: 2;
- display: flex;
- flex-direction: column;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- .info-item {
- display: flex;
- flex-direction: column;
- background-color: white;
- padding: 20px;
- strong {
- margin-bottom: 10px;
- white-space: nowrap;
- color: $medium_grey;
- }
- span,
- a {
- font-size: 14px;
- }
+ .edu-theme {
+ transition: transform 0.3s;
+ &:hover {
+ transform: scale(1.03);
}
- }
- .list-wrapper {
- grid-column: 1;
- grid-row: 2;
- ul.learning-themes {
- display: flex;
- gap: 20px 30px;
- flex-wrap: wrap;
- li.learning-theme {
- position: relative;
- border: solid $light_0;
- border-width: 0 2px 2px 0;
- display: flex;
- flex-direction: column;
- .title {
- color: $medium_grey;
- display: block;
- position: absolute;
- background-color: #fffa;
- padding: 3px 10px;
- width: 100%;
- }
- img {
- width: 100%;
- height: auto;
- image-rendering: pixelated;
- image-rendering: -moz-crisp-edges;
- image-rendering: crisp-edges;
- }
- .details {
- background-color: #fffe;
- position: absolute;
- top: 25px;
- left: 25px;
- width: 300px;
- height: auto;
- max-height: 0;
- visibility: hidden;
- z-index: 1;
- transition: max-height 0.6s;
- padding: 20px;
- border: solid $light_0;
- border-width: 0 1px 1px 0;
- overflow: hidden;
- display: flex;
- flex-direction: column;
- gap: 10px;
- .comment {
- font-style: italic;
- * {
- color: $medium_grey;
- }
- }
- ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
- li {
- color: $medium_grey;
- }
- }
- }
- &:hover {
- .details {
- max-height: 1000px;
- visibility: visible;
- }
- }
- }
+ img {
+ width: 100%;
}
}
+ }
+ // .section-contents {
+ // padding: 20px 40px 60px;
+ // display: grid;
+ // grid-template-columns: auto 1fr;
+ // gap: 20px;
+ // height: auto;
+ // .full-row {
+ // grid-column: 1 / span 2;
+ // }
+ // .practical-infos {
+ // grid-column: 2;
+ // grid-row: 2;
+ // display: flex;
+ // flex-direction: column;
+ // gap: 40px;
+ // background-image: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // .info-item {
+ // display: flex;
+ // flex-direction: column;
+ // background-color: white;
+ // padding: 20px;
+ // strong {
+ // margin-bottom: 10px;
+ // white-space: nowrap;
+ // color: $medium_grey;
+ // }
+ // span,
+ // a {
+ // font-size: 14px;
+ // }
+ // }
+ // }
+ // .list-wrapper {
+ // grid-column: 1;
+ // grid-row: 2;
+ // ul.learning-themes {
+ // display: flex;
+ // gap: 20px 30px;
+ // flex-wrap: wrap;
+ // li.learning-theme {
+ // position: relative;
+ // border: solid $light_0;
+ // border-width: 0 2px 2px 0;
+ // display: flex;
+ // flex-direction: column;
+ // .title {
+ // color: $medium_grey;
+ // display: block;
+ // position: absolute;
+ // background-color: #fffa;
+ // padding: 3px 10px;
+ // width: 100%;
+ // }
+ // img {
+ // width: 100%;
+ // height: auto;
+ // image-rendering: pixelated;
+ // image-rendering: -moz-crisp-edges;
+ // image-rendering: crisp-edges;
+ // }
+ // .details {
+ // background-color: #fffe;
+ // position: absolute;
+ // top: 25px;
+ // left: 25px;
+ // width: 300px;
+ // height: auto;
+ // max-height: 0;
+ // visibility: hidden;
+ // z-index: 1;
+ // transition: max-height 0.6s;
+ // padding: 20px;
+ // border: solid $light_0;
+ // border-width: 0 1px 1px 0;
+ // overflow: hidden;
+ // display: flex;
+ // flex-direction: column;
+ // gap: 10px;
+ // .comment {
+ // font-style: italic;
+ // * {
+ // color: $medium_grey;
+ // }
+ // }
+ // ul {
+ // list-style-type: disc;
+ // font-size: 14px;
+ // margin-left: 10px;
+ // li {
+ // color: $medium_grey;
+ // }
+ // }
+ // }
+ // &:hover {
+ // .details {
+ // max-height: 1000px;
+ // visibility: visible;
+ // }
+ // }
+ // }
+ // }
+ // }
- .infos-inscriptions {
- display: flex;
- gap: 40px;
- background-image: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- .groups,
- .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- h3 {
- margin: 0;
- color: $light_1;
- }
- .table-wrapper {
- table {
- border: 1px solid #dde;
- border-collapse: collapse;
- td {
- border: 1px solid #dde;
- padding: 10px 20px;
- }
- }
- }
- .documents {
- margin-top: 20px;
- .links {
- display: flex;
- gap: 20px;
- .download-link {
- border: 1px solid;
- padding: 8px;
- display: flex;
- margin: 10px 0 0;
- border-radius: 4px;
- }
- }
- }
+ // .infos-inscriptions {
+ // display: flex;
+ // gap: 40px;
+ // background-image: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // .groups,
+ // .pricing {
+ // background-color: white;
+ // padding: 20px;
+ // display: flex;
+ // flex-direction: column;
+ // h3 {
+ // margin: 0;
+ // color: $light_1;
+ // }
+ // .table-wrapper {
+ // table {
+ // border: 1px solid #dde;
+ // border-collapse: collapse;
+ // td {
+ // border: 1px solid #dde;
+ // padding: 10px 20px;
+ // }
+ // }
+ // }
+ // .documents {
+ // margin-top: 20px;
+ // .links {
+ // display: flex;
+ // gap: 20px;
+ // .download-link {
+ // border: 1px solid;
+ // padding: 8px;
+ // display: flex;
+ // margin: 10px 0 0;
+ // border-radius: 4px;
+ // }
+ // }
+ // }
- }
- }
+ // }
+ // }
- .teacher {
- grid-column: 1 / span 2;
- background: url("/assets/images/wallpaper_binary_light.png");
- padding: 30px;
- @include flex-center-col;
- .teacher-card {
- background-color: white;
- display: grid;
- grid-template-columns: auto 1fr;
- width: 100%;
- gap: 20px;
- padding: 20px;
- h3 {
- margin: 0;
- width: 100%;
- color: $light_1;
- grid-column: 1 / span 2;
- }
- .pic {
- img {
- width: 100px;
- }
- }
- .infos-text {
- padding: 0 20px;
- h4 {
- color: $blue_2;
- margin: 0;
- font-size: 18px;
- }
- p {
- color: $light_1;
- display: block;
- }
- }
- }
- }
- }
- @media screen and (max-width: $screen_l) {
- .section-contents {
- .list-wrapper {
- ul.learning-themes {
- display: block;
- li.learning-theme {
- width: 100%;
- margin-bottom: 20px;
- .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- ul {
- list-style-type: disc;
- font-size: 14px;
- margin-left: 10px;
- }
- }
- }
- }
- }
+ // .teacher {
+ // grid-column: 1 / span 2;
+ // background: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // @include flex-center-col;
+ // .teacher-card {
+ // background-color: white;
+ // display: grid;
+ // grid-template-columns: auto 1fr;
+ // width: 100%;
+ // gap: 20px;
+ // padding: 20px;
+ // h3 {
+ // margin: 0;
+ // width: 100%;
+ // color: $light_1;
+ // grid-column: 1 / span 2;
+ // }
+ // .pic {
+ // img {
+ // width: 100px;
+ // }
+ // }
+ // .infos-text {
+ // padding: 0 20px;
+ // h4 {
+ // color: $blue_2;
+ // margin: 0;
+ // font-size: 18px;
+ // }
+ // p {
+ // color: $light_1;
+ // display: block;
+ // }
+ // }
+ // }
+ // }
+ // }
+
+ // @media screen and (max-width: $screen_l) {
+ // .section-contents {
+ // .list-wrapper {
+ // ul.learning-themes {
+ // display: block;
+ // li.learning-theme {
+ // width: 100%;
+ // margin-bottom: 20px;
+ // .details {
+ // background-color: #fff9;
+ // position: relative;
+ // top: unset;
+ // width: 100%;
+ // left: unset;
+ // max-height: unset;
+ // visibility: visible;
+ // padding: 10px;
+ // box-shadow: none;
+ // ul {
+ // list-style-type: disc;
+ // font-size: 14px;
+ // margin-left: 10px;
+ // }
+ // }
+ // }
+ // }
+ // }
- .infos-inscriptions {
- flex-direction: column;
- }
- }
- }
+ // .infos-inscriptions {
+ // flex-direction: column;
+ // }
+ // }
+ // }
- @media screen and (max-width: $screen_m) {
- h3 {
- &.big {
- font-size: 22px;
- }
- }
- .title-banner {
- height: 170px;
- min-height: unset;
- h2 {
- font-size: 2em;
- margin: 20px;
- text-shadow: 0 0 4px #000b;
- }
- }
- .section-contents {
- padding: 20px 20px 40px;
- grid-template-columns: 100%;
- .full-row {
- grid-column: 1;
- }
- .practical-infos {
- grid-column: 1;
- grid-row: 3;
- gap: 10px;
- padding: 10px;
- }
- .list-wrapper {
- ul.learning-themes {
- grid-column: 1;
- grid-row: 2;
- display: block;
- li.learning-theme {
- margin-bottom: 20px;
- .details {
- background-color: #fff9;
- position: relative;
- top: unset;
- width: 100%;
- left: unset;
- max-height: unset;
- visibility: visible;
- padding: 10px;
- box-shadow: none;
- }
- }
- }
- }
+ // @media screen and (max-width: $screen_m) {
+ // h3 {
+ // &.big {
+ // font-size: 22px;
+ // }
+ // }
+ // .title-banner {
+ // height: 170px;
+ // min-height: unset;
+ // h2 {
+ // font-size: 2em;
+ // margin: 20px;
+ // text-shadow: 0 0 4px #000b;
+ // }
+ // }
+ // .section-contents {
+ // padding: 20px 20px 40px;
+ // grid-template-columns: 100%;
+ // .full-row {
+ // grid-column: 1;
+ // }
+ // .practical-infos {
+ // grid-column: 1;
+ // grid-row: 3;
+ // gap: 10px;
+ // padding: 10px;
+ // }
+ // .list-wrapper {
+ // ul.learning-themes {
+ // grid-column: 1;
+ // grid-row: 2;
+ // display: block;
+ // li.learning-theme {
+ // margin-bottom: 20px;
+ // .details {
+ // background-color: #fff9;
+ // position: relative;
+ // top: unset;
+ // width: 100%;
+ // left: unset;
+ // max-height: unset;
+ // visibility: visible;
+ // padding: 10px;
+ // box-shadow: none;
+ // }
+ // }
+ // }
+ // }
- .infos-inscriptions {
- gap: 10px;
- padding: 10px;
- .groups,
- .pricing {
- background-color: white;
- padding: 20px;
- display: flex;
- flex-direction: column;
- .table-wrapper {
- table {
- width: 100%;
- td {
- border: 1px solid #dde;
- padding: 10px;
- }
- }
- }
- }
- }
- .teacher {
- grid-column: 1;
- padding: 20px;
- }
- }
- }
+ // .infos-inscriptions {
+ // gap: 10px;
+ // padding: 10px;
+ // .groups,
+ // .pricing {
+ // background-color: white;
+ // padding: 20px;
+ // display: flex;
+ // flex-direction: column;
+ // .table-wrapper {
+ // table {
+ // width: 100%;
+ // td {
+ // border: 1px solid #dde;
+ // padding: 10px;
+ // }
+ // }
+ // }
+ // }
+ // }
+ // .teacher {
+ // grid-column: 1;
+ // padding: 20px;
+ // }
+ // }
+ // }
}
diff --git a/src/pages/education/index.js b/src/pages/education/index.js
index 91113ae..0657aae 100644
--- a/src/pages/education/index.js
+++ b/src/pages/education/index.js
@@ -1,5 +1,3 @@
-"use strict";
-
"use strict";
const runPage = require("../../run-page");
const EducationPage = require("./education");
diff --git a/src/pages/education/subpages/game-studio-club/game-studio-club.js b/src/pages/education/subpages/game-studio-club/game-studio-club.js
new file mode 100644
index 0000000..c7b7545
--- /dev/null
+++ b/src/pages/education/subpages/game-studio-club/game-studio-club.js
@@ -0,0 +1,197 @@
+"use strict";
+
+const WebPage = require("../../../../lib/web-page");
+const GameStudioClub = require("../../components/game-studio-club");
+
+"use strict";
+
+const { images_url } = require("../../../../constants");
+
+const GAMEDEV_THEMES = [
+ {
+ title: "Dessin et création 2D",
+ image: "learning_theme_2d.png",
+ details: [
+ "Création de décors et de personnages",
+ "Dessin sur ordinateur, pixel art, vectoriel",
+ "Animations 2D",
+ ],
+ },
+ {
+ title: "Musique et sons",
+ image: "learning_theme_sound.png",
+ details: ["Logiciels de son et synthétiseurs", "Composition", "Prise de son", "Mixage"],
+ },
+ {
+ title: "Écriture",
+ image: "learning_theme_write.png",
+ details: [
+ "Écrire une histoire, construire une narration",
+ "Imaginer des mondes et des personnages",
+ ],
+ },
+ {
+ title: "Conception",
+ image: "learning_theme_conception.png",
+ details: [
+ "Concevoir les différents éléments qui composent le jeu",
+ "Développer les mécanismes de gameplay",
+ ],
+ },
+ {
+ title: "Programmation",
+ image: "learning_theme_coding.png",
+ details: [
+ "Apprendre pas à pas à coder avec différents langages de programmation",
+ "Découvrir les bases du web en créant des mini-jeux en lignes",
+ ],
+ },
+ {
+ title: "Mathématiques",
+ image: "learning_theme_math.png",
+ comment:
+ "<em>Créer un jeu vidéo c'est l'occasion de découvrir plein de sujets en maths et en physique tout en s'amusant !</em>",
+ details: [
+ "Algorithmie",
+ "Logique (algèbre booléen)",
+ "Géométrie",
+ "Trigonométrie",
+ "Algèbre linéaire",
+ "Repères 2D / 3D",
+ "Vecteurs 2D / 3D",
+ "Newton",
+ "...",
+ ],
+ },
+ {
+ title: "Travail d'équipe",
+ image: "learning_theme_team.png",
+ comment: `
+ <em>
+ Faire son jeu tout seul c'est bien mais ça peut être long !
+ <br />Créer des jeux c'est aussi l'occasion de se mettre à plusieurs pour tirer le meilleur parti des différents talents de chacun.
+ </em>`,
+ details: ["Gestion de projet", "Méthodologie", "Communication"],
+ },
+ {
+ title: "Logiciels libres, GNU/Linux",
+ image: "learning_theme_linux.png",
+ comment:
+ "<em>Nous utilisons essentiellement des logiciels libres sur Linux.<br />C'est donc une bonne occasion de découvrir et démystifier tout ça en douceur !</em>",
+ details: ["Ubuntu / Debian", "GIMP", "LMMS", "Audacity", "Pencil2d", "..."],
+ },
+];
+
+class GameStudioClub {
+ render() {
+ return {
+ tag: "section",
+ typeof: "EducationalOrganization",
+ contents: [
+ {
+ tag: "div",
+ class: "title-banner game-banner",
+ contents: [{ tag: "h2", contents: "Game Studio Club", property: "name" }],
+ },
+ {
+ tag: "div",
+ class: "section-contents page-contents-center",
+ contents: [
+ {
+ tag: "div",
+ class: "full-row",
+ contents: [
+ {
+ tag: "h3",
+ class: "big",
+ contents:
+ "Apprendre à créer un <blue>jeu vidéo</blue> de A à Z",
+ property: "headline",
+ },
+ {
+ tag: "strong",
+ contents:
+ "La création d'un jeu vidéo c'est l'occasion d'aborder plein de choses différentes !",
+ },
+ {
+ tag: "p",
+ contents:
+ "<em><b><blue>Aucun prérequis nécessaire</blue></b>. Pas besoin d'être fort en maths ou en informatique, le but est d'apprendre et se détendre !</em>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "list-wrapper",
+ property: "hasPart",
+ contents: [
+ {
+ tag: "ul",
+ class: "learning-themes",
+ contents: GAMEDEV_THEMES.map(li => {
+ return {
+ tag: "li",
+ class: "learning-theme",
+ typeof: "ListItem",
+ contents: [
+ {
+ tag: "strong",
+ class: "title",
+ contents: li.title,
+ property: "name",
+ },
+ {
+ tag: "img",
+ alt: `learning theme image ${li.title}`,
+ src: `${images_url}${li.image}`,
+ property: "image",
+ },
+ {
+ tag: "div",
+ class: "details",
+ property: "description",
+ contents: [
+ li.comment && {
+ tag: "div",
+ class: "comment",
+ contents: li.comment,
+ },
+ {
+ tag: "ul",
+ contents: li.details.map(d => {
+ return {
+ tag: "li",
+ contents: d,
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ };
+ }),
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+
+class GameStudioClubPage extends WebPage {
+
+ render() {
+ return {
+ tag: "div",
+ id: "game-studio-club-page",
+ contents: [
+ new GameStudioClub().render(),
+ ],
+ };
+ }
+}
+
+module.exports = GameStudioClubPage;
diff --git a/src/pages/education/subpages/game-studio-club/game-studio-club.scss b/src/pages/education/subpages/game-studio-club/game-studio-club.scss
new file mode 100644
index 0000000..fd7e7f3
--- /dev/null
+++ b/src/pages/education/subpages/game-studio-club/game-studio-club.scss
@@ -0,0 +1,295 @@
+ // .section-contents {
+ // padding: 20px 40px 60px;
+ // display: grid;
+ // grid-template-columns: auto 1fr;
+ // gap: 20px;
+ // height: auto;
+ // .full-row {
+ // grid-column: 1 / span 2;
+ // }
+ // .practical-infos {
+ // grid-column: 2;
+ // grid-row: 2;
+ // display: flex;
+ // flex-direction: column;
+ // gap: 40px;
+ // background-image: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // .info-item {
+ // display: flex;
+ // flex-direction: column;
+ // background-color: white;
+ // padding: 20px;
+ // strong {
+ // margin-bottom: 10px;
+ // white-space: nowrap;
+ // color: $medium_grey;
+ // }
+ // span,
+ // a {
+ // font-size: 14px;
+ // }
+ // }
+ // }
+ // .list-wrapper {
+ // grid-column: 1;
+ // grid-row: 2;
+ // ul.learning-themes {
+ // display: flex;
+ // gap: 20px 30px;
+ // flex-wrap: wrap;
+ // li.learning-theme {
+ // position: relative;
+ // border: solid $light_0;
+ // border-width: 0 2px 2px 0;
+ // display: flex;
+ // flex-direction: column;
+ // .title {
+ // color: $medium_grey;
+ // display: block;
+ // position: absolute;
+ // background-color: #fffa;
+ // padding: 3px 10px;
+ // width: 100%;
+ // }
+ // img {
+ // width: 100%;
+ // height: auto;
+ // image-rendering: pixelated;
+ // image-rendering: -moz-crisp-edges;
+ // image-rendering: crisp-edges;
+ // }
+ // .details {
+ // background-color: #fffe;
+ // position: absolute;
+ // top: 25px;
+ // left: 25px;
+ // width: 300px;
+ // height: auto;
+ // max-height: 0;
+ // visibility: hidden;
+ // z-index: 1;
+ // transition: max-height 0.6s;
+ // padding: 20px;
+ // border: solid $light_0;
+ // border-width: 0 1px 1px 0;
+ // overflow: hidden;
+ // display: flex;
+ // flex-direction: column;
+ // gap: 10px;
+ // .comment {
+ // font-style: italic;
+ // * {
+ // color: $medium_grey;
+ // }
+ // }
+ // ul {
+ // list-style-type: disc;
+ // font-size: 14px;
+ // margin-left: 10px;
+ // li {
+ // color: $medium_grey;
+ // }
+ // }
+ // }
+ // &:hover {
+ // .details {
+ // max-height: 1000px;
+ // visibility: visible;
+ // }
+ // }
+ // }
+ // }
+ // }
+
+ // .infos-inscriptions {
+ // display: flex;
+ // gap: 40px;
+ // background-image: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // .groups,
+ // .pricing {
+ // background-color: white;
+ // padding: 20px;
+ // display: flex;
+ // flex-direction: column;
+ // h3 {
+ // margin: 0;
+ // color: $light_1;
+ // }
+ // .table-wrapper {
+ // table {
+ // border: 1px solid #dde;
+ // border-collapse: collapse;
+ // td {
+ // border: 1px solid #dde;
+ // padding: 10px 20px;
+ // }
+ // }
+ // }
+ // .documents {
+ // margin-top: 20px;
+ // .links {
+ // display: flex;
+ // gap: 20px;
+ // .download-link {
+ // border: 1px solid;
+ // padding: 8px;
+ // display: flex;
+ // margin: 10px 0 0;
+ // border-radius: 4px;
+ // }
+ // }
+ // }
+
+ // }
+ // }
+
+ // .teacher {
+ // grid-column: 1 / span 2;
+ // background: url("/assets/images/wallpaper_binary_light.png");
+ // padding: 30px;
+ // @include flex-center-col;
+ // .teacher-card {
+ // background-color: white;
+ // display: grid;
+ // grid-template-columns: auto 1fr;
+ // width: 100%;
+ // gap: 20px;
+ // padding: 20px;
+ // h3 {
+ // margin: 0;
+ // width: 100%;
+ // color: $light_1;
+ // grid-column: 1 / span 2;
+ // }
+ // .pic {
+ // img {
+ // width: 100px;
+ // }
+ // }
+ // .infos-text {
+ // padding: 0 20px;
+ // h4 {
+ // color: $blue_2;
+ // margin: 0;
+ // font-size: 18px;
+ // }
+ // p {
+ // color: $light_1;
+ // display: block;
+ // }
+ // }
+ // }
+ // }
+ // }
+
+ // @media screen and (max-width: $screen_l) {
+ // .section-contents {
+ // .list-wrapper {
+ // ul.learning-themes {
+ // display: block;
+ // li.learning-theme {
+ // width: 100%;
+ // margin-bottom: 20px;
+ // .details {
+ // background-color: #fff9;
+ // position: relative;
+ // top: unset;
+ // width: 100%;
+ // left: unset;
+ // max-height: unset;
+ // visibility: visible;
+ // padding: 10px;
+ // box-shadow: none;
+ // ul {
+ // list-style-type: disc;
+ // font-size: 14px;
+ // margin-left: 10px;
+ // }
+ // }
+ // }
+ // }
+ // }
+
+ // .infos-inscriptions {
+ // flex-direction: column;
+ // }
+ // }
+ // }
+
+ // @media screen and (max-width: $screen_m) {
+ // h3 {
+ // &.big {
+ // font-size: 22px;
+ // }
+ // }
+ // .title-banner {
+ // height: 170px;
+ // min-height: unset;
+ // h2 {
+ // font-size: 2em;
+ // margin: 20px;
+ // text-shadow: 0 0 4px #000b;
+ // }
+ // }
+ // .section-contents {
+ // padding: 20px 20px 40px;
+ // grid-template-columns: 100%;
+ // .full-row {
+ // grid-column: 1;
+ // }
+ // .practical-infos {
+ // grid-column: 1;
+ // grid-row: 3;
+ // gap: 10px;
+ // padding: 10px;
+ // }
+ // .list-wrapper {
+ // ul.learning-themes {
+ // grid-column: 1;
+ // grid-row: 2;
+ // display: block;
+ // li.learning-theme {
+ // margin-bottom: 20px;
+ // .details {
+ // background-color: #fff9;
+ // position: relative;
+ // top: unset;
+ // width: 100%;
+ // left: unset;
+ // max-height: unset;
+ // visibility: visible;
+ // padding: 10px;
+ // box-shadow: none;
+ // }
+ // }
+ // }
+ // }
+
+ // .infos-inscriptions {
+ // gap: 10px;
+ // padding: 10px;
+ // .groups,
+ // .pricing {
+ // background-color: white;
+ // padding: 20px;
+ // display: flex;
+ // flex-direction: column;
+ // .table-wrapper {
+ // table {
+ // width: 100%;
+ // td {
+ // border: 1px solid #dde;
+ // padding: 10px;
+ // }
+ // }
+ // }
+ // }
+ // }
+ // .teacher {
+ // grid-column: 1;
+ // padding: 20px;
+ // }
+ // }
+ // }
\ No newline at end of file
diff --git a/src/pages/education/subpages/game-studio-club/index.js b/src/pages/education/subpages/game-studio-club/index.js
new file mode 100644
index 0000000..fa0bba5
--- /dev/null
+++ b/src/pages/education/subpages/game-studio-club/index.js
@@ -0,0 +1,5 @@
+"use strict";
+
+const runPage = require("../../../../run-page");
+const GameStudioClubPage = require("./game-studio-club");
+runPage(GameStudioClubPage);
diff --git a/src/pages/education/subpages/game-studio-club/meta.json b/src/pages/education/subpages/game-studio-club/meta.json
new file mode 100644
index 0000000..517a945
--- /dev/null
+++ b/src/pages/education/subpages/game-studio-club/meta.json
@@ -0,0 +1,23 @@
+{
+ "title": "Kuadrado Software | Game Studio Club",
+ "description": "Apprendre à créer un jeu vidéo de A à Z",
+ "image": "https://kuadrado-software.fr/assets/images/brain.png",
+ "open_graph": {
+ "title": "Kuadrado Software | Game Studio Club",
+ "description": "Apprendre à créer un jeu vidéo de A à Z"
+ },
+ "json_ld": {
+ "@context": "https://schema.org",
+ "type": "WebPage",
+ "description": "Apprendre à créer un jeu vidéo de A à Z",
+ "image": [
+ "https://kuadrado-software.fr/assets/images/brain.svg",
+ "https://kuadrado-software.fr/assets/images/brain.png",
+ "https://kuadrado-software.fr/assets/images/game_studio_banner.png",
+ "https://kuadrado-software.fr/assets/images/popularization_banner.png"
+ ],
+ "keywords": "Apprendre informatique jeu vidéo, gamedev, code",
+ "name": "Kuadrado Software - Game Studio Club",
+ "url": "https://kuadrado-software.fr/education/game-studio/club"
+ }
+}
\ No newline at end of file
--
GitLab