diff --git a/public/main.js b/public/main.js
index 6131b2fd10e187e3782d17de134c38d514726e4e..0af3544315a26f6d2a338dd7066c7e9d2597475d 100644
--- a/public/main.js
+++ b/public/main.js
@@ -276,12 +276,9 @@ module.exports = ThemeCard;
const { images_url } = require("../constants");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
+const WebPage = require("./lib/web-page");
-class HomePage {
- constructor(args) {
- Object.assign(this, args);
- }
-
+class HomePage extends WebPage {
render() {
return {
tag: "div",
@@ -314,6 +311,20 @@ class HomePage {
class: "page-contents-center",
contents: `Créations numériques, jeux vidéos, web, software et pédagogie.`,
},
+ {
+ tag: "ul",
+ class: "philo-bubbles",
+ contents: [
+ "Simplicité",
+ "Légèreté",
+ "Écologie",
+ ].map(word => {
+ return {
+ tag: "li",
+ contents: [{ tag: "span", contents: word }],
+ };
+ }),
+ },
],
},
{
@@ -368,7 +379,7 @@ class HomePage {
module.exports = HomePage;
-},{"../constants":2,"./home-page-components/news-articles":4,"./home-page-components/theme-card":5}],7:[function(require,module,exports){
+},{"../constants":2,"./home-page-components/news-articles":4,"./home-page-components/theme-card":5,"./lib/web-page":10}],7:[function(require,module,exports){
"use strict";
const { fetchjson, fetchtext } = require("./fetch");
@@ -546,12 +557,22 @@ module.exports = {
},{}],10:[function(require,module,exports){
"use strict";
+class WebPage {
+ constructor(args) {
+ Object.assign(this, args);
+ }
+}
+
+module.exports = WebPage;
+},{}],11:[function(require,module,exports){
+"use strict";
+
const HomePage = require("./homepage");
const runPage = require("./run-page");
runPage(HomePage);
-},{"./homepage":6,"./run-page":11}],11:[function(require,module,exports){
+},{"./homepage":6,"./run-page":12}],12:[function(require,module,exports){
"use strict";
const objectHtmlRenderer = require("./lib/object-html-renderer");
@@ -563,7 +584,7 @@ module.exports = function runPage(PageComponent) {
objectHtmlRenderer.renderCycle();
};
-},{"./lib/object-html-renderer":9,"./template/template":13}],12:[function(require,module,exports){
+},{"./lib/object-html-renderer":9,"./template/template":14}],13:[function(require,module,exports){
"use strict";
const { images_url } = require("../../../constants");
@@ -681,7 +702,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");
@@ -755,4 +776,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/software-development/software-development.js b/public/software-development/software-development.js
index fc8525ee1c84e839102cc2a116bb9c146eaa5a05..c41a46acb7746ca715641eac48c9922c40cedf06 100644
--- a/public/software-development/software-development.js
+++ b/public/software-development/software-development.js
@@ -285,7 +285,7 @@ const SKILL_THEMES = [
"Conception et design UX / UI",
"Création graphique bitmap et vectoriel",
"Prototypes embarqués, IoT, Arduino",
- "Développement logiciel desktop",
+ "Développement logiciel",
"Applications Android",
];
diff --git a/public/style/style.css b/public/style/style.css
index 4006985e3ad555c442d86e0aa6d6280d9618c5b2..06990ef17b7ca4af79a0ddae4203d726984bd72a 100644
--- a/public/style/style.css
+++ b/public/style/style.css
@@ -365,6 +365,54 @@ main #page-container #home-page .section-title {
background-color: #d4d9dd;
color: #6b7880;
}
+main #page-container #home-page .page-header .philo-bubbles {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ flex-wrap: wrap;
+ gap: 40px;
+ margin: 30px 20px;
+}
+@media screen and (max-width: 780px) {
+ main #page-container #home-page .page-header .philo-bubbles {
+ gap: 20px;
+ }
+}
+main #page-container #home-page .page-header .philo-bubbles li {
+ border-radius: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: row;
+ background-color: #d4d9dd;
+ width: 100px;
+ height: 100px;
+}
+main #page-container #home-page .page-header .philo-bubbles li * {
+ color: #6b7880;
+}
+@media screen and (max-width: 560px) {
+ main #page-container #home-page .page-header .philo-bubbles li {
+ width: 75px;
+ height: 75px;
+ }
+ main #page-container #home-page .page-header .philo-bubbles li * {
+ font-size: 12px;
+ }
+}
+main #page-container #home-page .page-header .philo-bubbles li:first-child {
+ background-color: #6b7880;
+}
+main #page-container #home-page .page-header .philo-bubbles li:first-child * {
+ color: white;
+}
+main #page-container #home-page .page-header .philo-bubbles li:last-child {
+ background-color: #35393c;
+}
+main #page-container #home-page .page-header .philo-bubbles li:last-child * {
+ color: #96a5ae;
+}
main #page-container #home-page .articles-displayer {
margin: 0 auto 40px;
}
@@ -593,12 +641,11 @@ main #page-container #home-page .grid-3 .theme-card:hover {
}
}
@media screen and (max-width: 1300px) {
- main #page-container #home-page .articles-displayer,
-main #page-container #home-page .grid-3 {
+ main #page-container #home-page .grid-3 {
padding: 0 20px;
}
- main #page-container #home-page .section-title {
- margin: 0 20px;
+ main #page-container #home-page .articles-displayer {
+ padding: 0;
}
}
main #page-container #education-page h3.big {
diff --git a/src/homepage.js b/src/homepage.js
index 051edb022e8c6345a255fde063f1f77b32ff0509..14d105e52bf48edb22841bdd6e229a0fad185609 100644
--- a/src/homepage.js
+++ b/src/homepage.js
@@ -3,12 +3,9 @@
const { images_url } = require("../constants");
const NewsArticles = require("./home-page-components/news-articles");
const ThemeCard = require("./home-page-components/theme-card");
+const WebPage = require("./lib/web-page");
-class HomePage {
- constructor(args) {
- Object.assign(this, args);
- }
-
+class HomePage extends WebPage {
render() {
return {
tag: "div",
@@ -41,6 +38,20 @@ class HomePage {
class: "page-contents-center",
contents: `Créations numériques, jeux vidéos, web, software et pédagogie.`,
},
+ {
+ tag: "ul",
+ class: "philo-bubbles",
+ contents: [
+ "Simplicité",
+ "Légèreté",
+ "Écologie",
+ ].map(word => {
+ return {
+ tag: "li",
+ contents: [{ tag: "span", contents: word }],
+ };
+ }),
+ },
],
},
{
diff --git a/src/homepage.scss b/src/homepage.scss
index f16014f5608263cdc8b1c7621965a548e764170d..20215021e6f794616f62832d196131884dd8a158 100644
--- a/src/homepage.scss
+++ b/src/homepage.scss
@@ -9,6 +9,46 @@
background-color: $light_0;
color: $medium_grey;
}
+ .page-header {
+ .philo-bubbles {
+ @include flex-center;
+ flex-wrap: wrap;
+ gap: 40px;
+ @media screen and (max-width: $screen_m) {
+ gap: 20px;
+ }
+ margin: 30px 20px;
+ li {
+ border-radius: 100%;
+ @include flex-center;
+ background-color: $light_0;
+ * {
+ color: $medium_grey;
+ }
+ width: 100px;
+ height: 100px;
+ @media screen and (max-width: $screen_s) {
+ width: 75px;
+ height: 75px;
+ * {
+ font-size: 12px;
+ }
+ }
+ &:first-child {
+ background-color: $medium_grey;
+ * {
+ color: white;
+ }
+ }
+ &:last-child {
+ background-color: $dark_1;
+ * {
+ color: $light_1;
+ }
+ }
+ }
+ }
+ }
.articles-displayer {
margin: 0 auto 40px;
@@ -239,12 +279,11 @@
}
}
@media screen and (max-width: $page_contents_center_width) {
- .articles-displayer,
.grid-3 {
padding: 0 20px;
}
- .section-title {
- margin: 0 20px;
+ .articles-displayer {
+ padding: 0;
}
}
}
diff --git a/src/pages/software-development/components/service-section.js b/src/pages/software-development/components/service-section.js
index 7500ac0a0e33b1f06286f548c8541cb164b82ae5..8e7b07fbf0d5b908d2441ee336511a6e28d6b16d 100644
--- a/src/pages/software-development/components/service-section.js
+++ b/src/pages/software-development/components/service-section.js
@@ -10,7 +10,7 @@ const SKILL_THEMES = [
"Conception et design UX / UI",
"Création graphique bitmap et vectoriel",
"Prototypes embarqués, IoT, Arduino",
- "Développement logiciel desktop",
+ "Développement logiciel",
"Applications Android",
];