diff --git a/constants.js b/constants.js
index 67897a28ca2a0e0c1d3d652b18b9cb1c56a47b26..32116ec9721a5244b316f336e800b67494801def 100644
--- a/constants.js
+++ b/constants.js
@@ -1,6 +1,6 @@
const { getServerUrl } = require("./config");
module.exports = {
- images_url: `${getServerUrl()}assets/images`,
+ images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
diff --git a/public/articles/games/fantom_quest/fantom_quest.json b/public/articles/games/fantom_quest/fantom_quest.json
index 3fcaeae9446bcf2d5a85b480c62bdbc6ed37189a..9e0e9674c29b22eb494ff3e5e072d4d1873a2038 100755
--- a/public/articles/games/fantom_quest/fantom_quest.json
+++ b/public/articles/games/fantom_quest/fantom_quest.json
@@ -2,7 +2,6 @@
"title": "Fantom Quest",
"subtitle": "Le labyrinthe de la quête d'identité",
"tags": ["jeu web", "pixelart", "javascript", "labyrinthe"],
- "status": "wip",
"body": "<file>fantom_quest.txt",
"images": [
"screen_fantom_quest_1.jpg",
diff --git a/public/articles/software/index.json b/public/articles/software/index.json
index b2212f7ce92cb2213681b9ee53b11c52d02a7c84..9eeda8bf41fdedb4278e10b76c791495d7d54cee 100755
--- a/public/articles/software/index.json
+++ b/public/articles/software/index.json
@@ -1,3 +1,3 @@
{
- "articles": ["watergun"]
+ "articles": ["watergun", "website-template"]
}
diff --git a/public/articles/software/watergun/watergun.json b/public/articles/software/watergun/watergun.json
index f87ffaea744975a29d2ded14a21abca91d166a52..f12c1ba66b432e085095e6c0346aef93b0ec8dec 100755
--- a/public/articles/software/watergun/watergun.json
+++ b/public/articles/software/watergun/watergun.json
@@ -1,7 +1,6 @@
{
"title": "Watergun",
"date": "2021/01/23",
- "status": "wip",
"subtitle": "Un éditeur de site web ultra-light",
"body": "<file>watergun.txt",
"technical": {
diff --git a/public/articles/software/website-template/images/kuadrado-template-screen.png b/public/articles/software/website-template/images/kuadrado-template-screen.png
new file mode 100644
index 0000000000000000000000000000000000000000..1604d22f54f25008c6bdbcd7e143b243149db66c
Binary files /dev/null and b/public/articles/software/website-template/images/kuadrado-template-screen.png differ
diff --git a/public/articles/software/website-template/website-template.json b/public/articles/software/website-template/website-template.json
new file mode 100644
index 0000000000000000000000000000000000000000..6f5dd94c0fb9344449c64bea2cbfebff7bd1c859
--- /dev/null
+++ b/public/articles/software/website-template/website-template.json
@@ -0,0 +1,13 @@
+{
+ "title": "Website template",
+ "date": "2021/01/28",
+ "subtitle": "Modèle de site statique simple et dynamique",
+ "body": "<file>website-template.txt",
+ "technical": {
+ "stack": ["Javascript", "Browserify", "Nginx", "Docker"],
+ "license": "MIT",
+ "repository": "https://gitlab.com/peter_rabbit/kuadrado-website-template",
+ "version": "0.1.0"
+ },
+ "images": ["kuadrado-template-screen.png"]
+}
diff --git a/public/articles/software/website-template/website-template.txt b/public/articles/software/website-template/website-template.txt
new file mode 100644
index 0000000000000000000000000000000000000000..49fba5b9bba84f208d02163ecd385bfe57a7145c
--- /dev/null
+++ b/public/articles/software/website-template/website-template.txt
@@ -0,0 +1,5 @@
+Basé sur les mêmes mécanismes de rendu dynamique que pour Watergun, ce modèle de site web propose une base réutilisable pour n'importe quel site statique simple et moderne.
+
+Aucun framework ni aucune librairie n'est utilisée dans le moteur de rendu du DOM. L'objectif étant un maximum de légèreté et de simplicité à la fois dans le code mais aussi dans le résultat final.
+
+Ce modèle est celui qui a servi pour le présent site.
\ No newline at end of file
diff --git a/public/assets/images/tech_logos/apache.png b/public/assets/images/tech_logos/apache.png
new file mode 100644
index 0000000000000000000000000000000000000000..24c10f44733ae7c98647f08d031dfa383be38c13
Binary files /dev/null and b/public/assets/images/tech_logos/apache.png differ
diff --git a/public/assets/images/tech_logos/c.png b/public/assets/images/tech_logos/c.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc00d068b1255276a15503c4f055fc24f6f233a9
Binary files /dev/null and b/public/assets/images/tech_logos/c.png differ
diff --git a/public/assets/images/tech_logos/css.png b/public/assets/images/tech_logos/css.png
new file mode 100644
index 0000000000000000000000000000000000000000..499afaaab62a968d7ab1baf35b5e04154c92daba
Binary files /dev/null and b/public/assets/images/tech_logos/css.png differ
diff --git a/public/assets/images/tech_logos/docker.png b/public/assets/images/tech_logos/docker.png
new file mode 100644
index 0000000000000000000000000000000000000000..61228d658ea6d01bb2a99ca1b24cffe6d5bddcd1
Binary files /dev/null and b/public/assets/images/tech_logos/docker.png differ
diff --git a/public/assets/images/tech_logos/html.png b/public/assets/images/tech_logos/html.png
new file mode 100644
index 0000000000000000000000000000000000000000..5f78f2d438d0fd7e69d52834e0fa6e791838fd72
Binary files /dev/null and b/public/assets/images/tech_logos/html.png differ
diff --git a/public/assets/images/tech_logos/js.png b/public/assets/images/tech_logos/js.png
new file mode 100644
index 0000000000000000000000000000000000000000..f768218684cdb1eec27793b14d49cbac1a1c4dba
Binary files /dev/null and b/public/assets/images/tech_logos/js.png differ
diff --git a/public/assets/images/tech_logos/linux.png b/public/assets/images/tech_logos/linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6226359e12db783f46ff21b7bf61fd76d9b42555
Binary files /dev/null and b/public/assets/images/tech_logos/linux.png differ
diff --git a/public/assets/images/tech_logos/mongodb.png b/public/assets/images/tech_logos/mongodb.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5f846655bfa31a5e5b54a352efb0055131e95c8
Binary files /dev/null and b/public/assets/images/tech_logos/mongodb.png differ
diff --git a/public/assets/images/tech_logos/mysql.png b/public/assets/images/tech_logos/mysql.png
new file mode 100644
index 0000000000000000000000000000000000000000..4371026f51f3c40bb1d72739f3c1bb230477418f
Binary files /dev/null and b/public/assets/images/tech_logos/mysql.png differ
diff --git a/public/assets/images/tech_logos/nginx.png b/public/assets/images/tech_logos/nginx.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3bf0f889fb07ecc2a31e5e0d2063c66fc418fc8
Binary files /dev/null and b/public/assets/images/tech_logos/nginx.png differ
diff --git a/public/assets/images/tech_logos/node.png b/public/assets/images/tech_logos/node.png
new file mode 100644
index 0000000000000000000000000000000000000000..854d7ed021bbce7b68682714bb3608e578d0b1ac
Binary files /dev/null and b/public/assets/images/tech_logos/node.png differ
diff --git a/public/assets/images/tech_logos/postgre.png b/public/assets/images/tech_logos/postgre.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0d08ae50cc49a56e3d111ccd5ed99f32ad9eb9a
Binary files /dev/null and b/public/assets/images/tech_logos/postgre.png differ
diff --git a/public/assets/images/tech_logos/python.png b/public/assets/images/tech_logos/python.png
new file mode 100644
index 0000000000000000000000000000000000000000..3d9e0c290514c05c2115a3d13748b48f500f1625
Binary files /dev/null and b/public/assets/images/tech_logos/python.png differ
diff --git a/public/assets/images/tech_logos/react.png b/public/assets/images/tech_logos/react.png
new file mode 100644
index 0000000000000000000000000000000000000000..bdbb5f043f0875e0311c1134f65ac703b41402b7
Binary files /dev/null and b/public/assets/images/tech_logos/react.png differ
diff --git a/public/assets/images/tech_logos/rust.png b/public/assets/images/tech_logos/rust.png
new file mode 100644
index 0000000000000000000000000000000000000000..41a01113e7637228c9034fa4572f56f2eb681bcc
Binary files /dev/null and b/public/assets/images/tech_logos/rust.png differ
diff --git a/public/assets/images/tech_logos/sass.png b/public/assets/images/tech_logos/sass.png
new file mode 100644
index 0000000000000000000000000000000000000000..88d9104a9101d1c2a44349c4b2df038eef277bc6
Binary files /dev/null and b/public/assets/images/tech_logos/sass.png differ
diff --git a/public/education/education.js b/public/education/education.js
index 60c301a93a3e75e968ede3baf87c807ab6185f56..100045b18e4932e07e646c1724322cdf0bfa67c6 100644
--- a/public/education/education.js
+++ b/public/education/education.js
@@ -14,7 +14,7 @@ module.exports = {
const { getServerUrl } = require("./config");
module.exports = {
- images_url: `${getServerUrl()}assets/images`,
+ images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
@@ -111,12 +111,6 @@ class WebPage {
constructor(args) {
Object.assign(this, args);
}
-
- // setMeta() {
- // if (!this.meta) {
- // console.warn("Meta information missing")
- // }
- // }
}
module.exports = WebPage;
@@ -274,7 +268,8 @@ class GameStudioClub {
contents: "Contact",
},
{
- tag: "span",
+ tag: "a",
+ href: "tel:+33475780872",
contents: "04 75 78 08 72",
},
{
@@ -306,7 +301,7 @@ class GameStudioClub {
{
tag: "img",
alt: `learning theme image ${li.title}`,
- src: `${images_url}/${li.image}`,
+ src: `${images_url}${li.image}`,
},
{
tag: "div",
@@ -577,7 +572,8 @@ class Popularization {
contents: "Contact",
},
{
- tag: "span",
+ tag: "a",
+ href: "tel:+33475780872",
contents: "04 75 78 08 72",
},
{
@@ -609,7 +605,7 @@ class Popularization {
{
tag: "img",
alt: `learning theme image ${li.title}`,
- src: `${images_url}/${li.image}`,
+ src: `${images_url}${li.image}`,
},
{
tag: "div",
@@ -676,7 +672,7 @@ class EducationPage extends WebPage {
{
tag: "img",
alt: "image brain",
- src: `${images_url}/brain.svg`,
+ src: `${images_url}brain.svg`,
},
],
},
@@ -725,7 +721,14 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- ["/software-development/", "Software"],
+ [
+ "/software-development/",
+ "Software",
+ [
+ ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#service", "Prestation de services"],
+ ],
+ ],
[
"/education/",
"Pédagogie",
@@ -770,13 +773,13 @@ class NavBar {
{
tag: "img",
alt: "Logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -874,13 +877,13 @@ class Template {
{
tag: "img",
alt: `logo Kuadrado`,
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/public/games/games.js b/public/games/games.js
index f8474ebb63fe6148bc2909db5ccb764c3ef782c6..627a2c7f740f7de3710eb35ea685ca8613d877c4 100644
--- a/public/games/games.js
+++ b/public/games/games.js
@@ -14,7 +14,7 @@ module.exports = {
const { getServerUrl } = require("./config");
module.exports = {
- images_url: `${getServerUrl()}assets/images`,
+ images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
@@ -93,7 +93,7 @@ module.exports = ImageCarousel;
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
- return text.replaceAll("\n", "<br/>").replaceAll(" ", " ");
+ return text.replaceAll("\n", "<br/>");
}
function getArticleDate(date) {
@@ -269,12 +269,6 @@ class WebPage {
constructor(args) {
Object.assign(this, args);
}
-
- // setMeta() {
- // if (!this.meta) {
- // console.warn("Meta information missing")
- // }
- // }
}
module.exports = WebPage;
@@ -480,7 +474,7 @@ class GamesPage extends WebPage {
{
tag: "img",
alt: "image game controller",
- src: `${images_url}/game_controller.svg`,
+ src: `${images_url}game_controller.svg`,
},
],
},
@@ -529,7 +523,14 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- ["/software-development/", "Software"],
+ [
+ "/software-development/",
+ "Software",
+ [
+ ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#service", "Prestation de services"],
+ ],
+ ],
[
"/education/",
"Pédagogie",
@@ -574,13 +575,13 @@ class NavBar {
{
tag: "img",
alt: "Logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -678,13 +679,13 @@ class Template {
{
tag: "img",
alt: `logo Kuadrado`,
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/public/main.js b/public/main.js
index 19a12c0465b9f76a35c5e816fb5e616f01c62a5f..6131b2fd10e187e3782d17de134c38d514726e4e 100644
--- a/public/main.js
+++ b/public/main.js
@@ -14,7 +14,7 @@ module.exports = {
const { getServerUrl } = require("./config");
module.exports = {
- images_url: `${getServerUrl()}assets/images`,
+ images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
@@ -251,7 +251,7 @@ class ThemeCard {
{
tag: "div",
class: "card-img",
- contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}/${this.props.img}` }],
+ contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}${this.props.img}` }],
},
{
tag: "div",
@@ -298,13 +298,13 @@ class HomePage {
{
tag: "img",
alt: "logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "logo-text",
alt: "Kuadrado",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -374,7 +374,7 @@ module.exports = HomePage;
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
- return text.replaceAll("\n", "<br/>").replaceAll(" ", " ");
+ return text.replaceAll("\n", "<br/>");
}
function getArticleDate(date) {
@@ -570,7 +570,14 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- ["/software-development/", "Software"],
+ [
+ "/software-development/",
+ "Software",
+ [
+ ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#service", "Prestation de services"],
+ ],
+ ],
[
"/education/",
"Pédagogie",
@@ -615,13 +622,13 @@ class NavBar {
{
tag: "img",
alt: "Logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -719,13 +726,13 @@ class Template {
{
tag: "img",
alt: `logo Kuadrado`,
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/public/software-development/software-development.js b/public/software-development/software-development.js
index 68e82f3875ac32625a5c438a95d2bd16f65bdfc4..fc8525ee1c84e839102cc2a116bb9c146eaa5a05 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -14,7 +14,7 @@ module.exports = {
const { getServerUrl } = require("./config");
module.exports = {
- images_url: `${getServerUrl()}assets/images`,
+ images_url: `${getServerUrl()}assets/images/`,
articles_url: `${getServerUrl()}articles/`,
};
@@ -93,7 +93,7 @@ module.exports = ImageCarousel;
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
- return text.replaceAll("\n", "<br/>").replaceAll(" ", " ");
+ return text.replaceAll("\n", "<br/>");
}
function getArticleDate(date) {
@@ -269,25 +269,146 @@ class WebPage {
constructor(args) {
Object.assign(this, args);
}
-
- // setMeta() {
- // if (!this.meta) {
- // console.warn("Meta information missing")
- // }
- // }
}
module.exports = WebPage;
},{}],8:[function(require,module,exports){
"use strict";
+const { images_url } = require("../../../../constants");
+
+const SKILL_THEMES = [
+ "Applications web",
+ "Service backend, serveur, API REST, bases de données",
+ "Sites web statiques, serveurs de fichiers",
+ "Développement frontend, interfaces",
+ "Conception et design UX / UI",
+ "Création graphique bitmap et vectoriel",
+ "Prototypes embarqués, IoT, Arduino",
+ "Développement logiciel desktop",
+ "Applications Android",
+];
+
+const SKILL_STACK = [
+ ["Javascript", "js.png"],
+ ["Node.js", "node.png"],
+ ["React.js", "react.png"],
+ ["Python", "python.png"],
+ ["C/C++", "c.png"],
+ ["Rust", "rust.png"],
+ ["MySQL", "mysql.png"],
+ ["PostgreSQL", "postgre.png"],
+ ["MongoDB", "mongodb.png"],
+ ["HTML", "html.png"],
+ ["CSS", "css.png"],
+ ["Sass", "sass.png"],
+ ["Docker", "docker.png"],
+ ["Linux", "linux.png"],
+ ["Nginx", "nginx.png"],
+ ["Apache", "apache.png"],
+];
+
+class ServiceSection {
+ render() {
+ return {
+ tag: "section",
+ class: "page-contents-center",
+ id: "service-section",
+ contents: [
+ {
+ tag: "h3",
+ contents:
+ "<blue>Nos compétences</blue> pour votre besoin <blue>numérique</blue>",
+ },
+ {
+ tag: "p",
+ contents: `
+ La demande numérique est omniprésente et de nombreuses entreprises ont besoin de bénéficier d'outils spécifiques réalisés sur mesure,
+ applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
+ et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
+ <br /><br />
+ <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises locales (Ardèche, Drôme, Rhône, Loire...) en étant leur <b>partenaire
+ en développement <blue>web et logiciel</blue></b>.
+ `,
+ },
+ {
+ tag: "p",
+ class: "teaser",
+ contents: [
+ {
+ tag: "strong",
+ contents:
+ "Des solutions <blue>sur mesure, légères, simples, maintenables, scalables et ecologiques</blue>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "skills",
+ contents: [
+ {
+ tag: "ul",
+ class: "skill-themes",
+ contents: SKILL_THEMES.map(item => {
+ return { tag: "li", contents: item };
+ }),
+ },
+ {
+ tag: "ul",
+ class: "skill-stack",
+ contents: SKILL_STACK.map(item => {
+ const [title, img] = item;
+ return {
+ tag: "li",
+ contents: [
+ {
+ tag: "strong",
+ contents: title,
+ },
+ {
+ tag: "img",
+ src: `${images_url}tech_logos/${img}`,
+ },
+ ],
+ };
+ }),
+ },
+ {
+ tag: "div",
+ class: "call-us",
+ contents: [
+ {
+ tag: "h3",
+ contents: `Un <blue>projet à réaliser</blue> ?
+ <br/>Besoin d'informations, de conseils ou d'un <blue>devis</blue> ?`,
+ },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ },
+ {
+ tag: "a",
+ href: "tel:+33475780872",
+ contents: "04 75 78 08 72",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = ServiceSection;
+
+},{"../../../../constants":2}],9:[function(require,module,exports){
+"use strict";
+
const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
-const {
- loadArticles,
- getArticleBody,
- getArticleDate,
-} = require("../../../lib/article-utils");
+const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");
class SoftwareArticle {
@@ -381,6 +502,7 @@ class SoftwareArticle {
{
tag: "a",
href: technical.repository,
+ target: "_blank",
contents: "Dépôt code source",
},
],
@@ -411,6 +533,7 @@ class SoftwareArticles {
.then(articles => {
this.state.articles = articles;
this.refresh();
+ this.fixScroll();
})
.catch(e => console.log(e));
}
@@ -419,7 +542,11 @@ class SoftwareArticles {
return {
tag: "article",
class: "placeholder",
- contents: [{ tag: "div" }, { tag: "div" }],
+ contents: [
+ { tag: "div", class: "title" },
+ { tag: "div", class: "body" },
+ { tag: "div", class: "details" },
+ ],
};
}
@@ -429,6 +556,16 @@ class SoftwareArticles {
});
}
+ fixScroll() {
+ if (window.location.href.includes("#")) {
+ window.scrollTo(
+ 0,
+ document.getElementById(window.location.href.match(/#.+/)[0].replace("#", ""))
+ .offsetTop
+ );
+ }
+ }
+
render() {
const { articles } = this.state;
return {
@@ -445,11 +582,12 @@ class SoftwareArticles {
module.exports = SoftwareArticles;
-},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],9:[function(require,module,exports){
+},{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],10:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
+const ServiceSection = require("./components/service-section");
const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment extends WebPage {
@@ -473,7 +611,7 @@ class SoftwareDevelopment extends WebPage {
{
tag: "img",
alt: `image mechanic electronic`,
- src: `${images_url}/meca_proc.svg`,
+ src: `${images_url}meca_proc.svg`,
},
],
},
@@ -486,7 +624,20 @@ class SoftwareDevelopment extends WebPage {
},
],
},
+ {
+ tag: "h2",
+ id: "projects", //anchor
+ contents: "Nos projets",
+ class: "page-section-title",
+ },
new SoftwareArticles().render(),
+ {
+ tag: "h2",
+ id: "service", //anchor
+ contents: "Prestation de services",
+ class: "page-section-title",
+ },
+ new ServiceSection().render(),
],
};
}
@@ -494,7 +645,7 @@ class SoftwareDevelopment extends WebPage {
module.exports = SoftwareDevelopment;
-},{"../../../constants":2,"../../lib/web-page":7,"./components/software-articles":8}],10:[function(require,module,exports){
+},{"../../../constants":2,"../../lib/web-page":7,"./components/service-section":8,"./components/software-articles":9}],11:[function(require,module,exports){
"use strict";
"use strict";
@@ -502,7 +653,7 @@ const runPage = require("../../run-page");
const SoftwareDevelopment = require("./software-development");
runPage(SoftwareDevelopment);
-},{"../../run-page":11,"./software-development":9}],11:[function(require,module,exports){
+},{"../../run-page":12,"./software-development":10}],12:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -514,14 +665,21 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":6,"./template/template":13}],12:[function(require,module,exports){
+},{"./lib/object-html-renderer":6,"./template/template":14}],13:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- ["/software-development/", "Software"],
+ [
+ "/software-development/",
+ "Software",
+ [
+ ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#service", "Prestation de services"],
+ ],
+ ],
[
"/education/",
"Pédagogie",
@@ -566,13 +724,13 @@ class NavBar {
{
tag: "img",
alt: "Logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -625,7 +783,7 @@ class NavBar {
module.exports = NavBar;
-},{"../../../constants":2}],13:[function(require,module,exports){
+},{"../../../constants":2}],14:[function(require,module,exports){
"use strict";
const { in_construction } = require("../../config");
@@ -670,13 +828,13 @@ class Template {
{
tag: "img",
alt: `logo Kuadrado`,
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
@@ -699,4 +857,4 @@ class Template {
module.exports = Template;
-},{"../../config":1,"../../constants":2,"./components/navbar":12}]},{},[10]);
+},{"../../config":1,"../../constants":2,"./components/navbar":13}]},{},[11]);
diff --git a/public/style/pages/software-development/software-development.css b/public/style/pages/software-development/software-development.css
index ace551e1497a1403f43dfc91c0373ca409fe8416..7446ac3ca3680f9668eee838c85300195fcdfb25 100644
--- a/public/style/pages/software-development/software-development.css
+++ b/public/style/pages/software-development/software-development.css
@@ -1,9 +1,9 @@
/* Error: Undefined variable.
* ,
- * 8 | background-color: $dark_2;
+ * 9 | background-color: $dark_2;
* | ^^^^^^^
* '
- * src/pages/software-development/software-development.scss 8:31 root stylesheet */
+ * src/pages/software-development/software-development.scss 9:31 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 8 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 8:31 root stylesheet";
+ content: "Error: Undefined variable.\a \2577 \a 9 \2502 background-color: $dark_2;\a \2502 ^^^^^^^\a \2575 \a src/pages/software-development/software-development.scss 9:31 root stylesheet";
}
diff --git a/public/style/style.css b/public/style/style.css
index 86d8ebadc17bf3cc463660a87b2b2f3e3a7baa7c..4006985e3ad555c442d86e0aa6d6280d9618c5b2 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -336,6 +336,23 @@ main #page-container .page-contents-center {
max-width: 100%;
margin: 0 auto;
}
+@media screen and (max-width: 1300px) {
+ main #page-container .page-contents-center {
+ padding: 20px 20px 0;
+ }
+}
+main #page-container h2.page-section-title {
+ color: #4baabb;
+ padding: 20px 0 10px;
+ width: 1300px;
+ max-width: 100%;
+ margin: 0 auto;
+}
+@media screen and (max-width: 1300px) {
+ main #page-container h2.page-section-title {
+ padding: 20px 20px 0;
+ }
+}
main #page-container #home-page {
display: flex;
flex-direction: column;
@@ -842,7 +859,7 @@ main #page-container #games-page .game-articles article {
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 0 20px;
- margin: 20px;
+ margin: 20px 0;
}
main #page-container #games-page .game-articles article.game-article {
grid-template-rows: repeat(6, auto);
@@ -966,10 +983,13 @@ main #page-container #games-page .game-articles article.placeholder * {
grid-column: 1/span 2;
}
}
+main #page-container #software-page .software-articles {
+ margin: 0 auto 50px;
+}
main #page-container #software-page .software-articles article.software-article {
display: grid;
grid-template-columns: 1fr 1fr;
- margin: 30px 0;
+ margin: 0 0 30px;
gap: 0 30px;
background-color: #3c4144;
}
@@ -1019,7 +1039,7 @@ main #page-container #software-page .software-articles article.software-article
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail {
display: grid;
grid-template-columns: 1fr auto;
- padding: 10px 0;
+ padding: 5px 0;
}
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail:not(:first-child) {
border-top: 1px solid #6b7880;
@@ -1035,11 +1055,6 @@ main #page-container #software-page .software-articles article.software-article
main #page-container #software-page .software-articles article.software-article .software-technical ul.technical-details .detail *:not(a) {
color: #d4d9dd;
}
-@media screen and (max-width: 1300px) {
- main #page-container #software-page .software-articles article.software-article {
- margin: 30px 20px;
- }
-}
@media screen and (max-width: 900px) {
main #page-container #software-page .software-articles article.software-article {
grid-template-columns: 1fr;
@@ -1056,9 +1071,165 @@ main #page-container #software-page .software-articles article.software-article
}
}
main #page-container #software-page .software-articles article.placeholder {
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ margin: 30px;
+}
+main #page-container #software-page .software-articles article.placeholder * {
background-color: #d4d9dd;
+}
+main #page-container #software-page .software-articles article.placeholder .title {
+ height: 60px;
+}
+main #page-container #software-page .software-articles article.placeholder .body {
height: 400px;
- margin: 30px;
+}
+main #page-container #software-page .software-articles article.placeholder .details {
+ height: 200px;
+}
+main #page-container #software-page #service-section h3 {
+ margin: 0 0 20px;
+}
+main #page-container #software-page #service-section .skills {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 20px;
+ margin: 20px 0;
+}
+main #page-container #software-page #service-section .skills ul {
+ display: grid;
+ gap: 1px;
+ max-width: 100%;
+}
+main #page-container #software-page #service-section .skills ul li {
+ box-shadow: 0 0 2px #96a5ae;
+}
+main #page-container #software-page #service-section .skills ul.skill-themes {
+ width: 600px;
+ grid-template-columns: repeat(3, 1fr);
+ background-color: #3c4144;
+}
+@media screen and (max-width: 560px) {
+ main #page-container #software-page #service-section .skills ul.skill-themes {
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ }
+}
+@media screen and (max-width: 480px) {
+ main #page-container #software-page #service-section .skills ul.skill-themes {
+ grid-template-columns: 1fr;
+ }
+}
+main #page-container #software-page #service-section .skills ul.skill-themes li {
+ font-weight: bold;
+ color: #d4d9dd;
+ font-size: 18px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ padding: 10px;
+ text-align: center;
+}
+main #page-container #software-page #service-section .skills ul.skill-stack {
+ width: 400px;
+ grid-template-columns: repeat(4, 1fr);
+}
+main #page-container #software-page #service-section .skills ul.skill-stack li {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ position: relative;
+ padding: 10px;
+}
+main #page-container #software-page #service-section .skills ul.skill-stack li strong {
+ visibility: hidden;
+ max-height: 0;
+ height: 70px;
+ padding: 0 20px;
+ transition: max-height 0.3s;
+ position: absolute;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+}
+main #page-container #software-page #service-section .skills ul.skill-stack li img {
+ width: 100%;
+}
+@media screen and (min-width: 780px) {
+ main #page-container #software-page #service-section .skills ul.skill-stack li:hover strong {
+ visibility: visible;
+ max-height: 80px;
+ background-color: #fffc;
+ font-size: 18px;
+ }
+}
+@media screen and (max-width: 780px) {
+ main #page-container #software-page #service-section .skills ul.skill-stack li strong {
+ visibility: visible;
+ position: relative;
+ max-height: unset;
+ height: unset;
+ padding: 0;
+ }
+}
+@media screen and (max-width: 480px) {
+ main #page-container #software-page #service-section .skills ul.skill-stack {
+ grid-template-columns: repeat(3, 1fr);
+ }
+}
+main #page-container #software-page #service-section .teaser {
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 40px 30px;
+ text-align: center;
+ font-size: 18px;
+}
+main #page-container #software-page #service-section .teaser strong {
+ color: #d4d9dd;
+}
+main #page-container #software-page #service-section .teaser blue {
+ color: #72e3f0;
+}
+main #page-container #software-page #service-section .call-us {
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ gap: 10px 0;
+ margin: 40px 0;
+}
+main #page-container #software-page #service-section .call-us * {
+ font-weight: bold;
+}
+main #page-container #software-page #service-section .call-us h3 {
+ grid-column: 1/span 2;
+ text-align: center;
+}
+main #page-container #software-page #service-section .call-us a {
+ background-color: #3c4144;
+ font-size: 20px;
+ text-align: center;
+ padding: 20px;
+}
+@media screen and (max-width: 780px) {
+ main #page-container #software-page #service-section .call-us {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-direction: column;
+ gap: 0;
+ }
+ main #page-container #software-page #service-section .call-us h3 {
+ margin: 0 0 10px;
+ }
+ main #page-container #software-page #service-section .call-us a {
+ width: 100%;
+ }
}
main footer {
display: flex;
diff --git a/src/home-page-components/theme-card.js b/src/home-page-components/theme-card.js
index c9a03342928f24714577b7311d35d757408e1785..c71643b28d8b437524c30712fb5d3f90d9952002 100644
--- a/src/home-page-components/theme-card.js
+++ b/src/home-page-components/theme-card.js
@@ -16,7 +16,7 @@ class ThemeCard {
{
tag: "div",
class: "card-img",
- contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}/${this.props.img}` }],
+ contents: [{ tag: "img", alt:`thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`,src: `${images_url}${this.props.img}` }],
},
{
tag: "div",
diff --git a/src/homepage.js b/src/homepage.js
index 377b60acc9d2d2032bcbefd41ab5695b8cb6ad1d..051edb022e8c6345a255fde063f1f77b32ff0509 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -25,13 +25,13 @@ class HomePage {
{
tag: "img",
alt: "logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "logo-text",
alt: "Kuadrado",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/src/lib/article-utils.js b/src/lib/article-utils.js
index ed31a353eaceccfe19055be5f4d3d2d82c3f49f0..3a7d83f773806cc6779d6bfef87fd438972badf8 100644
--- a/src/lib/article-utils.js
+++ b/src/lib/article-utils.js
@@ -3,7 +3,7 @@
const { fetchjson, fetchtext } = require("./fetch");
function getArticleBody(text) {
- return text.replaceAll("\n", "<br/>").replaceAll(" ", " ");
+ return text.replaceAll("\n", "<br/>");
}
function getArticleDate(date) {
diff --git a/src/lib/web-page.js b/src/lib/web-page.js
index 022fd3bfdb091b5a072679f592b95e33e7632520..b58f4c0a88f85c2b45ca6220c6ed4651488dbfb1 100644
--- a/src/lib/web-page.js
+++ b/src/lib/web-page.js
@@ -4,12 +4,6 @@ class WebPage {
constructor(args) {
Object.assign(this, args);
}
-
- // setMeta() {
- // if (!this.meta) {
- // console.warn("Meta information missing")
- // }
- // }
}
module.exports = WebPage;
\ No newline at end of file
diff --git a/src/pages/education/components/game-studio-club.js b/src/pages/education/components/game-studio-club.js
index 1b9849105d5ac4e15ae1bfa1c900c8b213d1dd18..3c3fffecc0a50a953c378664916727ad7af9b8fb 100644
--- a/src/pages/education/components/game-studio-club.js
+++ b/src/pages/education/components/game-studio-club.js
@@ -151,7 +151,8 @@ class GameStudioClub {
contents: "Contact",
},
{
- tag: "span",
+ tag: "a",
+ href: "tel:+33475780872",
contents: "04 75 78 08 72",
},
{
@@ -183,7 +184,7 @@ class GameStudioClub {
{
tag: "img",
alt: `learning theme image ${li.title}`,
- src: `${images_url}/${li.image}`,
+ src: `${images_url}${li.image}`,
},
{
tag: "div",
diff --git a/src/pages/education/components/popularization.js b/src/pages/education/components/popularization.js
index d09b59ba59a7ce8790ab1cd4d5463af610c96e08..e0420350a69d525b84cd38e32ca101237238b137 100644
--- a/src/pages/education/components/popularization.js
+++ b/src/pages/education/components/popularization.js
@@ -101,7 +101,8 @@ class Popularization {
contents: "Contact",
},
{
- tag: "span",
+ tag: "a",
+ href: "tel:+33475780872",
contents: "04 75 78 08 72",
},
{
@@ -133,7 +134,7 @@ class Popularization {
{
tag: "img",
alt: `learning theme image ${li.title}`,
- src: `${images_url}/${li.image}`,
+ src: `${images_url}${li.image}`,
},
{
tag: "div",
diff --git a/src/pages/education/education.js b/src/pages/education/education.js
index d088914c71d87b92cac70c6780170596a3429151..92af28cd10b49453d6634586d9f0475ee16fdc2e 100644
--- a/src/pages/education/education.js
+++ b/src/pages/education/education.js
@@ -27,7 +27,7 @@ class EducationPage extends WebPage {
{
tag: "img",
alt: "image brain",
- src: `${images_url}/brain.svg`,
+ src: `${images_url}brain.svg`,
},
],
},
diff --git a/src/pages/games/games.js b/src/pages/games/games.js
index 246ae03c5e8c9038758cea324cd11e1c5bc45436..a10e131198697240df4f9d18c93ee5227031fa21 100644
--- a/src/pages/games/games.js
+++ b/src/pages/games/games.js
@@ -25,7 +25,7 @@ class GamesPage extends WebPage {
{
tag: "img",
alt: "image game controller",
- src: `${images_url}/game_controller.svg`,
+ src: `${images_url}game_controller.svg`,
},
],
},
diff --git a/src/pages/games/games.scss b/src/pages/games/games.scss
index fc261174edf9c2677d3dbd08a04bfaadd6fec88e..df569d7f318b8b392511f5c7b53c9c923237295f 100644
--- a/src/pages/games/games.scss
+++ b/src/pages/games/games.scss
@@ -4,7 +4,7 @@
display: grid;
grid-template-columns: 0.7fr 1fr;
gap: 0 20px;
- margin: 20px;
+ margin: 20px 0;
&.game-article {
grid-template-rows: repeat(6, auto);
background-color: $dark_2;
diff --git a/src/pages/software-development/components/service-section.js b/src/pages/software-development/components/service-section.js
new file mode 100644
index 0000000000000000000000000000000000000000..7500ac0a0e33b1f06286f548c8541cb164b82ae5
--- /dev/null
+++ b/src/pages/software-development/components/service-section.js
@@ -0,0 +1,129 @@
+"use strict";
+
+const { images_url } = require("../../../../constants");
+
+const SKILL_THEMES = [
+ "Applications web",
+ "Service backend, serveur, API REST, bases de données",
+ "Sites web statiques, serveurs de fichiers",
+ "Développement frontend, interfaces",
+ "Conception et design UX / UI",
+ "Création graphique bitmap et vectoriel",
+ "Prototypes embarqués, IoT, Arduino",
+ "Développement logiciel desktop",
+ "Applications Android",
+];
+
+const SKILL_STACK = [
+ ["Javascript", "js.png"],
+ ["Node.js", "node.png"],
+ ["React.js", "react.png"],
+ ["Python", "python.png"],
+ ["C/C++", "c.png"],
+ ["Rust", "rust.png"],
+ ["MySQL", "mysql.png"],
+ ["PostgreSQL", "postgre.png"],
+ ["MongoDB", "mongodb.png"],
+ ["HTML", "html.png"],
+ ["CSS", "css.png"],
+ ["Sass", "sass.png"],
+ ["Docker", "docker.png"],
+ ["Linux", "linux.png"],
+ ["Nginx", "nginx.png"],
+ ["Apache", "apache.png"],
+];
+
+class ServiceSection {
+ render() {
+ return {
+ tag: "section",
+ class: "page-contents-center",
+ id: "service-section",
+ contents: [
+ {
+ tag: "h3",
+ contents:
+ "<blue>Nos compétences</blue> pour votre besoin <blue>numérique</blue>",
+ },
+ {
+ tag: "p",
+ contents: `
+ La demande numérique est omniprésente et de nombreuses entreprises ont besoin de bénéficier d'outils spécifiques réalisés sur mesure,
+ applications web et mobiles, site statiques, logiciels, ERP, etc, mais n'ont pas forcément les compétences chez elles,
+ et n'ont pas non plus un besoin suffisamment grand pour embaucher une équipe de développement.
+ <br /><br />
+ <b><blue>Kuadrado</blue></b> propose de répondre à ce cas de figure pour les entreprises locales (Ardèche, Drôme, Rhône, Loire...) en étant leur <b>partenaire
+ en développement <blue>web et logiciel</blue></b>.
+ `,
+ },
+ {
+ tag: "p",
+ class: "teaser",
+ contents: [
+ {
+ tag: "strong",
+ contents:
+ "Des solutions <blue>sur mesure, légères, simples, maintenables, scalables et ecologiques</blue>",
+ },
+ ],
+ },
+ {
+ tag: "div",
+ class: "skills",
+ contents: [
+ {
+ tag: "ul",
+ class: "skill-themes",
+ contents: SKILL_THEMES.map(item => {
+ return { tag: "li", contents: item };
+ }),
+ },
+ {
+ tag: "ul",
+ class: "skill-stack",
+ contents: SKILL_STACK.map(item => {
+ const [title, img] = item;
+ return {
+ tag: "li",
+ contents: [
+ {
+ tag: "strong",
+ contents: title,
+ },
+ {
+ tag: "img",
+ src: `${images_url}tech_logos/${img}`,
+ },
+ ],
+ };
+ }),
+ },
+ {
+ tag: "div",
+ class: "call-us",
+ contents: [
+ {
+ tag: "h3",
+ contents: `Un <blue>projet à réaliser</blue> ?
+ <br/>Besoin d'informations, de conseils ou d'un <blue>devis</blue> ?`,
+ },
+ {
+ tag: "a",
+ href: "mailto:contact@kuadrado-software.fr",
+ contents: "contact@kuadrado-software.fr",
+ },
+ {
+ tag: "a",
+ href: "tel:+33475780872",
+ contents: "04 75 78 08 72",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ };
+ }
+}
+
+module.exports = ServiceSection;
diff --git a/src/pages/software-development/components/software-articles.js b/src/pages/software-development/components/software-articles.js
index a90420c694279ad9b57d9a2fe5d7dd2287dc2cf3..41d27f643ecf00f431b160e861cd9316c2714bff 100644
--- a/src/pages/software-development/components/software-articles.js
+++ b/src/pages/software-development/components/software-articles.js
@@ -2,11 +2,7 @@
const { articles_url } = require("../../../../constants");
const ImageCarousel = require("../../../generic-components/image-carousel");
-const {
- loadArticles,
- getArticleBody,
- getArticleDate,
-} = require("../../../lib/article-utils");
+const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("../../../lib/object-html-renderer");
class SoftwareArticle {
@@ -100,6 +96,7 @@ class SoftwareArticle {
{
tag: "a",
href: technical.repository,
+ target: "_blank",
contents: "Dépôt code source",
},
],
@@ -130,6 +127,7 @@ class SoftwareArticles {
.then(articles => {
this.state.articles = articles;
this.refresh();
+ this.fixScroll();
})
.catch(e => console.log(e));
}
@@ -138,7 +136,11 @@ class SoftwareArticles {
return {
tag: "article",
class: "placeholder",
- contents: [{ tag: "div" }, { tag: "div" }],
+ contents: [
+ { tag: "div", class: "title" },
+ { tag: "div", class: "body" },
+ { tag: "div", class: "details" },
+ ],
};
}
@@ -148,6 +150,16 @@ class SoftwareArticles {
});
}
+ fixScroll() {
+ if (window.location.href.includes("#")) {
+ window.scrollTo(
+ 0,
+ document.getElementById(window.location.href.match(/#.+/)[0].replace("#", ""))
+ .offsetTop
+ );
+ }
+ }
+
render() {
const { articles } = this.state;
return {
diff --git a/src/pages/software-development/software-development.js b/src/pages/software-development/software-development.js
index 3032680c7456988eee77aa644113f0d155ee5d2e..321a7cc1b4d26afb9ac6a430a28cb820cef1a5e9 100644
--- a/src/pages/software-development/software-development.js
+++ b/src/pages/software-development/software-development.js
@@ -2,6 +2,7 @@
const { images_url } = require("../../../constants");
const WebPage = require("../../lib/web-page");
+const ServiceSection = require("./components/service-section");
const SoftwareArticles = require("./components/software-articles");
class SoftwareDevelopment extends WebPage {
@@ -25,7 +26,7 @@ class SoftwareDevelopment extends WebPage {
{
tag: "img",
alt: `image mechanic electronic`,
- src: `${images_url}/meca_proc.svg`,
+ src: `${images_url}meca_proc.svg`,
},
],
},
@@ -38,7 +39,20 @@ class SoftwareDevelopment extends WebPage {
},
],
},
+ {
+ tag: "h2",
+ id: "projects", //anchor
+ contents: "Nos projets",
+ class: "page-section-title",
+ },
new SoftwareArticles().render(),
+ {
+ tag: "h2",
+ id: "service", //anchor
+ contents: "Prestation de services",
+ class: "page-section-title",
+ },
+ new ServiceSection().render(),
],
};
}
diff --git a/src/pages/software-development/software-development.scss b/src/pages/software-development/software-development.scss
index 10f208409a3d448baef42eea29b163e3b1b635f2..64bdd26b0ffe88ae496c0cacad7cfbde3005252b 100644
--- a/src/pages/software-development/software-development.scss
+++ b/src/pages/software-development/software-development.scss
@@ -1,9 +1,10 @@
#software-page {
.software-articles {
+ margin: 0 auto 50px;
article.software-article {
display: grid;
grid-template-columns: 1fr 1fr;
- margin: 30px 0;
+ margin: 0 0 30px;
gap: 0 30px;
background-color: $dark_2;
& > * {
@@ -55,7 +56,7 @@
&:not(:first-child) {
border-top: 1px solid $medium_grey;
}
- padding: 10px 0;
+ padding: 5px 0;
label {
font-weight: bold;
}
@@ -70,10 +71,6 @@
}
}
}
-
- @media screen and (max-width: $page_contents_center_width) {
- margin: 30px 20px;
- }
@media screen and (max-width: $screen_l) {
grid-template-columns: 1fr;
.software-title {
@@ -89,9 +86,148 @@
}
}
article.placeholder {
- background-color: $light_0;
- height: 400px;
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
margin: 30px;
+ * {
+ background-color: $light_0;
+ }
+ .title {
+ height: 60px;
+ }
+ .body {
+ height: 400px;
+ }
+ .details {
+ height: 200px;
+ }
+ }
+ }
+ #service-section {
+ h3 {
+ margin: 0 0 20px;
+ }
+ .skills {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ gap: 20px;
+ margin: 20px 0;
+ ul {
+ display: grid;
+ gap: 1px;
+ max-width: 100%;
+ li {
+ box-shadow: 0 0 2px $light_1;
+ }
+ &.skill-themes {
+ width: 600px;
+ grid-template-columns: repeat(3, 1fr);
+ @media screen and (max-width: $screen_s) {
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ }
+ @media screen and (max-width: $screen_xs) {
+ grid-template-columns: 1fr;
+ }
+ background-color: $dark_2;
+ li {
+ font-weight: bold;
+ color: $light_0;
+ font-size: 18px;
+ @include flex-center;
+ padding: 10px;
+ text-align: center;
+ }
+ }
+ &.skill-stack {
+ width: 400px;
+ grid-template-columns: repeat(4, 1fr);
+ li {
+ @include flex-center-col;
+ position: relative;
+ padding: 10px;
+ strong {
+ visibility: hidden;
+ max-height: 0;
+ height: 70px;
+ padding: 0 20px;
+ transition: max-height 0.3s;
+ position: absolute;
+ @include flex-center;
+ }
+ img {
+ width: 100%;
+ }
+ @media screen and (min-width: $screen_m) {
+ &:hover {
+ strong {
+ visibility: visible;
+ max-height: 80px;
+ background-color: #fffc;
+ font-size: 18px;
+ }
+ }
+ }
+
+ @media screen and (max-width: $screen_m) {
+ strong {
+ visibility: visible;
+ position: relative;
+ max-height: unset;
+ height: unset;
+ padding: 0;
+ }
+ }
+ }
+ @media screen and (max-width: $screen_xs) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ }
+ }
+ }
+ .teaser {
+ background-image: url("/assets/images/wallpaper_binary.png");
+ padding: 40px 30px;
+ text-align: center;
+ font-size: 18px;
+ strong {
+ color: $light_0;
+ }
+ blue {
+ color: $blue_3;
+ }
+ }
+ .call-us {
+ * {
+ font-weight: bold;
+ }
+ display: grid;
+ grid-template-columns: 1fr 1fr;
+ width: 100%;
+ gap: 10px 0;
+ margin: 40px 0;
+ h3 {
+ grid-column: 1 / span 2;
+ text-align: center;
+ }
+ a {
+ background-color: $dark_2;
+ font-size: 20px;
+ text-align: center;
+ padding: 20px;
+ }
+ @media screen and (max-width: $screen_m) {
+ @include flex-center-col;
+ gap: 0;
+ h3 {
+ margin: 0 0 10px;
+ }
+ a {
+ width: 100%;
+ }
+ }
}
}
}
diff --git a/src/style.scss b/src/style.scss
index d7681c7cad656c5fb1b29aada664364695c354c2..621f723d103048d7d8ab602559b0ace6ca175032 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -340,9 +340,12 @@ main {
}
}
.page-contents-center {
- width: $page_contents_center_width;
- max-width: 100%;
- margin: 0 auto;
+ @include page-contents-center;
+ }
+ h2.page-section-title {
+ color: $blue_2;
+ padding: 20px 0 10px;
+ @include page-contents-center;
}
@import "./homepage.scss";
@import "./pages/education/education.scss";
diff --git a/src/template/components/navbar.js b/src/template/components/navbar.js
index 06ebafd0411dfb2341ef0a459a2b1f01993a86cf..d13bde2aeb505cdafa806ef16e61d48fc04c1c5a 100644
--- a/src/template/components/navbar.js
+++ b/src/template/components/navbar.js
@@ -4,7 +4,14 @@ const { images_url } = require("../../../constants");
const NAV_MENU_ITEMS = [
["/games/", "Jeux"],
- ["/software-development/", "Software"],
+ [
+ "/software-development/",
+ "Software",
+ [
+ ["/software-development/#projects", "Nos Projets"],
+ ["/software-development/#service", "Prestation de services"],
+ ],
+ ],
[
"/education/",
"Pédagogie",
@@ -49,13 +56,13 @@ class NavBar {
{
tag: "img",
alt: "Logo Kuadrado",
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
alt: "Kuadrado Software",
class: "logo-text",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/src/template/template.js b/src/template/template.js
index 3b009c0e188e40025187583ea8ccdb579d909f3b..fc416522c808c2d2aa42ad05bd34466a4384620c 100644
--- a/src/template/template.js
+++ b/src/template/template.js
@@ -42,13 +42,13 @@ class Template {
{
tag: "img",
alt: `logo Kuadrado`,
- src: `${images_url}/logo_kuadrado.svg`,
+ src: `${images_url}logo_kuadrado.svg`,
},
{
tag: "img",
class: "text-logo",
alt: "Kuadrado Software",
- src: `${images_url}/logo_kuadrado_txt.svg`,
+ src: `${images_url}logo_kuadrado_txt.svg`,
},
],
},
diff --git a/src/theme.scss b/src/theme.scss
index 359933a56abfd6926f87f64b66a3d6e4122ccadf..8c3add6763df3b5e1488dccd1fa8c260f6502a90 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -40,3 +40,12 @@ $page_contents_center_width: 1300px;
@include flex-center;
flex-direction: column;
}
+
+@mixin page-contents-center {
+ width: $page_contents_center_width;
+ max-width: 100%;
+ margin: 0 auto;
+ @media screen and (max-width: $page_contents_center_width) {
+ padding: 20px 20px 0;
+ }
+}