diff --git a/assets/js/main.js b/assets/js/main.js
new file mode 100644
index 0000000..f88bfae
--- /dev/null
+++ b/assets/js/main.js
@@ -0,0 +1,71 @@
+'use strict';
+function reverse(str) { return str.split("").reverse().join(""); }
+function getName() { return "nomis"; }
+function getAt() { return "@"; }
+function getDomain() { return "okew"; }
+function getDot() { return "."; }
+function getTld() { return "oi"; }
+function getAddress() { return reverse(getName()) + getAt() + reverse(getDomain()) + getDot() + reverse(getTld()); }
+
+function comments(elm) {
+ var link = document.getElementById('comment-add');
+ link.href = "mai" + "lto:" + getAddress() + "?subject=" + link.dataset.title;
+ elm.remove();
+}
+
+function contact() {
+ var link = document.getElementById('contact');
+ link.href = "mai" + "lto:" + getAddress();
+}
+
+// function menu() {
+// var button = document.getElementById('menu-button'),
+// menu = document.getElementById('menu');
+//
+// button.onclick = function () {
+// if (document.body.classList.contains('menu-open')) {
+// document.body.classList.remove('menu-open');
+// } else {
+// window.scroll({ top: 0, left: 0 });
+// document.body.classList.add('menu-open');
+// }
+// };
+// }
+
+function changeTheme() {
+ // https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/#using-javascript-local-storage
+ const btn = document.querySelector(".btn-toggle");
+ const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
+
+ const currentTheme = localStorage.getItem("theme");
+
+ if (currentTheme == "dark") {
+ document.body.classList.toggle("dark-theme");
+ } else if (currentTheme == "light") {
+ document.body.classList.toggle("light-theme");
+ }
+
+ btn.addEventListener("click", function () {
+ if (prefersDarkScheme.matches) {
+ document.body.classList.toggle("light-theme");
+ var theme = document.body.classList.contains("light-theme")
+ ? "light"
+ : "dark";
+ } else {
+ document.body.classList.toggle("dark-theme");
+ var theme = document.body.classList.contains("dark-theme")
+ ? "dark"
+ : "light";
+ }
+
+ localStorage.setItem("theme", theme);
+ });
+}
+
+function main() {
+ // menu();
+ contact();
+ changeTheme();
+}
+
+main();
diff --git a/assets/styles/basic/html.sass b/assets/styles/basic/html.sass
new file mode 100644
index 0000000..74a37e6
--- /dev/null
+++ b/assets/styles/basic/html.sass
@@ -0,0 +1,85 @@
+html
+ /*-webkit-font-smoothing: antialiased*/
+ /*--moz-osx-font-smoothing: grayscale*/
+ scroll-behavior: smooth
+ /* 18px */
+ font-size: 112.5%
+
+ @media screen and (max-width: $size-small)
+ font-size: 100%
+
+body
+ font-weight: 400
+ line-height: 1.65
+ font-family: var(--font)
+ color: var(--color-paragraph)
+ background-color: var(--color-dark-background)
+ min-height: 100vh
+
+p
+ margin-bottom: 1.15rem
+
+h1,
+h2,
+h3,
+h4,
+h5
+ font-weight: 400
+ line-height: 1.15
+
+h1
+ font-size: 1.802em
+ text-align: center
+ overflow-wrap: anywhere
+ //hyphens: auto
+
+h2
+ font-size: 1.602em
+ overflow-wrap: anywhere
+ //hyphens: auto
+
+h3
+ font-size: 1.424em
+
+h4
+ font-size: 1.266em
+
+h5
+ font-size: 1.125em
+
+small,
+.text_small
+ font-size: 0.889em
+
+a
+ color: var(--color-text)
+ &:hover, &:active
+ color: var(--color-text-strong)
+
+h2 + blockquote
+ margin-top: 1rem
+
+ul.no-style
+ margin: 0
+ padding: 0
+ list-style-type: none
+
+blockquote
+ padding: 1rem 1.5rem
+ margin: 2rem 0 3rem
+ width: calc(100% - 1rem)
+ border: solid 2px var(--color-highlight-border)
+ border-radius: var(--radius-corner)
+ box-shadow: 1rem 1rem 0 0 var(--color-highlight-bg)
+ background-color: var(--color-white)
+ overflow-wrap: anywhere
+ hyphens: auto
+
+ @media screen and (max-width: $size-small)
+ margin: 1rem 0 1.5rem
+ padding: .5rem .75rem
+ width: calc(100% - .5rem)
+ box-shadow: .5rem .5rem 0 0 var(--color-highlight-bg)
+
+ ul
+ padding-left: 20px
diff --git a/assets/styles/basic/reset.scss b/assets/styles/basic/reset.scss
new file mode 100644
index 0000000..b115ce9
--- /dev/null
+++ b/assets/styles/basic/reset.scss
@@ -0,0 +1,48 @@
+/*********
+Reset CSS
+*********/
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+ box-sizing: border-box;
+}
+
+/* Remove default margin */
+body,
+p,
+ul[class]
+ol[class],
+li,
+figure,
+figcaption,
+blockquote,
+dl,
+dd {
+ margin: 0;
+}
+
+/* Make images easier to work with */
+img {
+ max-width: 100%;
+ display: block;
+}
+
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+ font: inherit;
+}
+
+/* Remove all animations and transitions for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+ * {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ scroll-behavior: auto !important;
+ }
+}
diff --git a/assets/styles/font.sass b/assets/styles/font.sass
new file mode 100644
index 0000000..eebc411
--- /dev/null
+++ b/assets/styles/font.sass
@@ -0,0 +1,35 @@
+@font-face
+ font-family: "blackout-midnight"
+ src: url("/webfonts/blackout/blackout_midnight-webfont2.woff") format("woff")
+ font-weight: normal
+ font-style: normal
+
+@font-face
+ font-family: "blackout-sunrise"
+ src: url("/webfonts/blackout/blackout_sunrise-webfont.woff") format("woff")
+ font-weight: normal
+ font-style: normal
+
+@font-face
+ font-family: "blackout-two-am"
+ src: url("/webfonts/blackout/blackout_two_am-webfont.woff") format("woff")
+ font-weight: normal
+ font-style: normal
+
+@font-face
+ font-family: "prociono"
+ src: url("/webfonts/prociono/Prociono-Regular-webfont.woff") format("woff")
+ font-weight: normal
+ font-style: normal
+
+@font-face
+ font-family: "LeagueMono"
+ src: url("/webfonts/LeagueSpartan-Light.woff2") format("woff2")
+ font-weight: normal
+ font-style: normal
+
+@font-face
+ font-family: "Raleway"
+ src: url("/webfonts/Raleway-Light.woff2") format("woff2")
+ font-weight: normal
+ font-style: normal
diff --git a/assets/styles/home.sass b/assets/styles/home.sass
new file mode 100644
index 0000000..edeaad7
--- /dev/null
+++ b/assets/styles/home.sass
@@ -0,0 +1,262 @@
+.container
+ max-width: $size-small
+ margin: 0 auto
+ padding: 1rem
+
+ &.md
+ max-width: 660px
+
+
+header .container
+ display: flex
+ justify-content: space-between
+
+main > section
+ margin: 2rem auto
+
+
+#menu ul
+ list-style-type: none
+ li
+ display: inline
+ img
+ display: inline
+
+
+#title
+ margin: 4rem auto
+ h1, h2
+ text-align: center
+
+ h1
+ margin-bottom: 1rem
+
+ h2
+ font-size: 1rem
+ margin: 0 3rem
+
+.highlight
+ display: inline-block
+ color: white
+ padding: .5rem
+ margin: .5rem
+ font-family: "blackout-midnight"
+ transform: rotate(-2deg)
+ background-color: var(--color-tertiary)
+ border-radius: var(--border-radius)
+ // text-shadow: 4px 3px 0 #7A7A7A, 2px 2px 2px rgba(206,89,55,0)
+
+ &:hover
+ background: var(--color-highlight)
+
+#presentation
+ display: flex
+ justify-content: center
+ flex-wrap: wrap
+
+ section
+ max-width: 16rem
+ padding: 4rem 1rem 1rem
+
+ article
+ background: var(--color-dark-background-card)
+ padding: 2rem 1rem
+ text-align: center
+ height: 10rem
+ position: relative
+ border-radius: var(--border-radius)
+ margin-bottom: 1rem
+
+ img
+ position: absolute
+ left: 0
+ right: 0
+ margin: -5rem auto
+
+ h3
+ padding-top: 1rem
+ hyphens: auto
+ word-break: break-word
+
+#contact
+ // border-radius: 34% 45% 45% 38% / 34% 77% 38% 88%
+ // background: var(--color-dark-background-card)
+ max-width: 36rem
+ padding: 3rem
+ text-align: center
+
+ h3
+ margin: 2rem 0
+
+ p a
+ font-size: 1.3rem
+ padding: 1rem
+
+#news
+ display: flex
+ justify-content: center
+ flex-wrap: wrap
+
+ #reflexions h3
+ text-align: right
+
+ .more
+ display: block
+ text-align: center
+
+#info
+ display: flex
+ justify-content: center
+ flex-wrap: wrap
+ align-items: center
+ section
+ margin: 2rem auto
+
+ margin-left: -1rem
+ margin-right: -1rem
+
+ .container
+ text-align: center
+
+ @media screen and (min-width: $size-small)
+ margin-left: calc(-100vw / 2 + #{$size-small} / 2 - 1rem)
+ margin-right: calc(-100vw / 2 + #{$size-small} / 2)
+
+ #valeurs
+ width: 50%
+
+ .container
+ // transform: rotate(2deg)
+ float: right
+ width: calc(#{$size-small/2} - 2rem
+ padding: .5rem
+ #me
+ width: 50%
+
+ .container
+ padding: 2rem 0 2rem 2rem
+ width: $size-small/2
+
+ h3
+ text-align: center
+ margin: 2rem 0
+
+ #valeurs
+ background-color: var(--color-dark-background-card)
+
+ // transform: rotate(-2deg)
+ padding: 1rem
+
+ #me
+ .container
+ text-align: center
+
+ img
+ margin: 0 auto
+
+#valeurs
+ .container
+ display: flex
+ align-items: strech
+
+ h3
+ display: block
+ height: auto
+ writing-mode: vertical-rl
+ text-align: right
+ position: relative
+ padding: 0 .5rem
+ margin: 2rem .5rem
+ border-left: 3px dashed var(--color-white)
+ // border-right: 2px solid var(--color-white)
+ transform: rotate(180deg)
+
+ @media screen and (max-width: 630px)
+ padding-right: 0
+ margin-right: 0
+
+
+ ul.card
+ display: flex
+ justify-content: center
+ flex-wrap: wrap
+
+ li
+ background: var(--color-dark-background-card)
+ // border: 2px solid var(--color-white)
+ position: relative
+ margin: 2rem 1rem
+ padding: 2rem 1rem 1rem
+ width: calc(33% - 2rem)
+ text-align: center
+ display: flex
+ align-items: center
+ justify-content: center
+ flex-direction: column
+ border-radius: var(--border-radius)
+
+ @media screen and (max-width: 770px)
+ width: calc(50% - 2rem)
+
+ @media screen and (max-width: 630px)
+ width: 100%
+ h4
+ left: -1rem
+
+ &:hover
+ h4
+ background-color: var(--color-highlight)
+ transform: rotate(2deg)
+
+ h4
+ position: absolute
+ top: -2rem
+ transition-property: transform
+ transition-duration: .2s
+ p
+ margin: 0
+
+
+ img
+ position: absolute
+ background-color: white
+ padding: .5rem
+ border: 1px solid white
+ left: -2rem
+ top: -2rem
+
+#me
+ padding: 2rem
+ text-align: center
+ background-image: repeating-linear-gradient(-45deg,transparent,transparent 7px,var(--color-dark-background-card) 0, var(--color-dark-background-card) 10px)
+
+ @media screen and (max-width: 630px)
+ padding: 1rem
+
+ .container
+ padding-top: 3rem
+ max-width: 660px
+ background: var(--color-dark-background)
+
+ img
+ margin: 0 auto
+
+ h3
+ margin: 2rem auto
+
+#partenaire
+ ul
+ li
+ text-align: center
+ padding: .5rem
+ img
+ height: 75px
+ margin: 0 auto
+ filter: grayscale(1)
+
+ .container
+ display: flex
+ justify-content: space-between
+ align-items: flex-start
+ .right
+ width: 75%
diff --git a/assets/styles/main.sass b/assets/styles/main.sass
new file mode 100644
index 0000000..44d53d3
--- /dev/null
+++ b/assets/styles/main.sass
@@ -0,0 +1,108 @@
+@import "./basic/reset"
+
+// Variables
+@import "../../themes/hugo-theme-lowtech/assets/styles/font"
+
+$size-small: 1024px
+$color-dark: #010101
+$color-light: #fffffe
+
+@mixin dark-theme
+ // https://www.happyhues.co/palettes/4
+ --color-black: #{$color-dark}
+ --color-white: #{$color-light}
+ --color-highlight: #2cb67d
+ --color-secondary: #72757e
+ --color-tertiary: #7f5af0
+
+ --color-dark-background: #16161a
+ --color-dark-background-card: #242629
+
+ --color-light-background: #242629
+ --color-light-background-card: #16161a
+
+ --color-headline: var(--color-white)
+ --color-paragraph: #94a1b2
+ --color-button: var(--color-highlight)
+ --color-button-text: var(--color-white)
+
+@mixin light-theme
+ // https://www.happyhues.co/palettes/2
+ --color-black: #{$color-light}
+ --color-white: #{$color-dark}
+ --color-highlight: #00ebc7
+ --color-secondary: #ff5470
+ --color-tertiary: #fde24f
+
+ --color-dark-background: #fffffe
+ --color-dark-background-card: #f2f4f6
+
+ --color-light-background: #242629
+ --color-light-background-card: #16161a
+
+ --color-headline: #00214d
+ --color-paragraph: #1b2d45
+ --color-button: var(--color-highlight)
+ --color-button-text: var(--color-white)
+
+body
+ color-scheme: light dark
+ --font: "prociono"
+ --background-grid: 15px
+ --border-radius: 4px
+
+ @include light-theme
+
+ &.dark-theme
+ @include dark-theme
+
+@media (prefers-color-scheme: dark)
+ body
+ @include dark-theme
+
+ &.light-theme
+ @include light-theme
+
+// \::selection
+// background-color: invert($color-dark, $weight: 100%)
+// color: invert($color-light, $weight: 100%)
+
+.btn-toggle
+ font-size: 1.5rem
+ background: inherit
+ border: inherit
+ padding: 1rem 0 1rem 1rem
+ cursor: pointer
+
+.light-theme .btn-toggle
+ filter: grayscale(0)!important
+
+.dark-theme .btn-toggle
+ filter: grayscale(.5)!important
+
+@media (prefers-color-scheme: dark)
+ .btn-toggle
+ filter: grayscale(.5)
+
+#logo a
+ width: 186px
+ height: 79px
+ display: block
+ background-repeat: no-repeat
+ background-image: url('/logos/weko-noir.svg')
+
+@media (prefers-color-scheme: dark)
+ #logo a
+ background-image: url('/logos/weko-blanc.svg')
+
+.light-theme #logo a
+ background-image: url('/logos/weko-noir.svg')
+
+.dark-theme #logo a
+ background-image: url('/logos/weko-blanc.svg')
+
+@import "./home"
+@import "./basic/html"
+@import "./font"
+
+// @import "./elements/header"
diff --git a/content/_index.md b/content/_index.md
new file mode 100644
index 0000000..230acc5
--- /dev/null
+++ b/content/_index.md
@@ -0,0 +1,7 @@
+---
+title: Weko, pour un numérique responsable de proximité
+---
+
+## Weko, une entreprise engagée
+
+Je vou
diff --git a/content/creation-de-site-internet.md b/content/creation-de-site-internet.md
new file mode 100644
index 0000000..04e1697
--- /dev/null
+++ b/content/creation-de-site-internet.md
@@ -0,0 +1,24 @@
+---
+title: Création de site Internet sur mesure
+---
+
+# Création de site Internet sur mesure
+
+Je réalise des sites internet depuis plus de 15 ans. L'ensemble de mes sites sont personnalisé permettant d'avoir un design unique. Un accompagnement poussé pour une création du site en éco-conception permet de créer un site performant, de qualité, favorisant un référencement naturel.
+
+## L'éco-conception
+
+
+Nous réalisons les maquettes ensemble, ce qui permet de
+
+## Accessible
+
+Les sites sont fait d'une façon permettant une très bonne accessibilité. Des tests poussés sont réalisés
+
+## Faible impact énergétique
+
+Les sites que je réalise ont une emprunt énergétique très faible ce qui améliore son impact environnementale. Des outils permettent d'évaluer
+
+## Proposition d'hébergement local
+
+Une offre d'hébergement peut être proposé pour l'hébergement du site internet. Cette hébergement est fait localement à Crémeaux.
diff --git a/data/homepage.yml b/data/homepage.yml
new file mode 100644
index 0000000..a67a211
--- /dev/null
+++ b/data/homepage.yml
@@ -0,0 +1,61 @@
+---
+banner:
+ title: Pour un numérique responsable et local
+ image: images/home.svg
+ content: >
+ Créons ensemble le numérique de demain sur le territoire de la Loire.
+ Vous avez besoin d'[un site internet à faible impact énergétique](/sites/) ?
+ Vous voulez utiliser des services qui respect votre vie privée ?
+ [Vous vous demandez](/idees/) quel matériel informatique ou téléphone vous devez acheter ?
+ button:
+ enable: true
+ label: Contactez-moi
+ link: /#contact
+
+valeur:
+ enable: true
+ title: "Les valeurs de Weko"
+ valeur_item:
+ - name : "Liberté"
+ image : "valeur-liberte"
+ content : "Weko utilise uniquement des logiciels libres pour son infrastructure et ses services permettant une interropérabilité."
+
+ - name : "Transparence"
+ image : "valeur-transparence"
+ content : "L'ensemble des projets de Weko est documenté pour être facilement modifiable et duplicable."
+
+ - name : "Sobriété"
+ image : "valeur-sobriete"
+ content : "Les serveurs ont été achetés reconditionnés, ce sont des nano-ordinateurs (Raspberry Pi) consommant quelques watts."
+
+ - name : "Éthique"
+ image : "valeur-ethique"
+ content : "Vos données vous appartiennent, vous êtes l'exclusif propriétaire. Weko ne les partage pas et ne les revend pas."
+
+ - name : "Locale"
+ image : "valeur-locale"
+ content : "Les serveurs sont auto-hébergés dans la Loire dans la Communauté de Commune du Pays d'Urfé à Crémeaux, pour que vos données ne parcourent pas 15 000 km."
+
+ - name : "Sécurité"
+ image : "valeur-securite"
+ content : "La mise à jour des logiciels se fait de façon hebdomadaire. Des sauvegardes chiffrées sont effectués quotidiennement."
+
+presentations:
+ enable: true
+ presentations_item:
+ - image: /images/simon.png
+ image_alt: Simon
+ content: >
+ ### Qui est derrière Weko
+
+ Je me présente Simon CONSTANS, passionné de l’informatique.
+ J’en ai fait mon métier en devenant **ingénieur** spécialisé dans le développement,
+ j’ai pu mettre à contribution mes compétences dans des startups avec **des projets éthiques**.
+
+ Depuis 2017, je me renseigne énormément sur mon **impact environnemental**,
+ et prenant conscience que **l’informatique n’était vraiment pas _green_**,
+ je cherche des solutions concrètes pour réduire mon impact.
+
+ Après 2 ans de multiple test, je lance **Weko**, dont l’objectif est d’**informer localement**
+ sur l’impact du numérique et **proposer des alternatives** que ça soit pour
+ les particuliers, les collectivités mais aussi les entreprises.
diff --git a/data/services.yml b/data/services.yml
new file mode 100644
index 0000000..e69de29
diff --git a/data/sites.yml b/data/sites.yml
new file mode 100644
index 0000000..7a78d13
--- /dev/null
+++ b/data/sites.yml
@@ -0,0 +1,28 @@
+---
+sites:
+ - title: Crémeaux
+ description: Site officiel de la commune de Crémeaux qui est situé dans le département de la Loire en région Auvergne-Rhône-Alpes sur la Communauté de Commune du Pays d'Urfé.
+ url: https://cremeaux.fr
+ source: https://git.weko.io/weko/cremeaux
+ image: cremeaux.png
+ online: 2020
+ - title: Histoire d'un Pied
+ description: Histoire d'un pied est une série de livres témoignant d'un combat face au handicap.
+ url: https://histoiredunpied.com
+ source: https://git.weko.io/weko/histoiredunpied
+ image: histoiredunpied.png
+ online: 2019
+ - title: Les Toits du Val
+ description: Collectif membre du réseau des Centrales Villageoises développant un projet de grappe solaire photovoltaïque dans la communauté de commune Aix et d'Isable.
+ url: https://lestoitsduval.fr
+ source: https://git.weko.io/weko/lestoitsduval
+ image: lestoitsduval.png
+ online: 2018
+
+a_rappatrier:
+ - title: Fatum Fatras
+ description: Groupe de musique qui puise son inspiration dans les thèmes traditionnels des Balkans et des pays du bassin méditerranéen, sans jamais oublier sa culture occidentale et son goût pour le rock’n’roll.
+ url: http://fatumfatras.com
+ source: https://github.com/ftmftrs/ftmftrs.github.io
+ image: fatumfatras.png
+ online: 2015
\ No newline at end of file
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
new file mode 100644
index 0000000..4c8bfc0
--- /dev/null
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,26 @@
+
+
+{{ partial "head.html" . }}
+
Besoin d'un site personnalisé à faible impact énergétique ?
+Et si vous vous lanciez dans le numérique responsable, besoin d'expertise ?
+Vous voulez sensibiliser à l'impact du numérique ?
+Vous avez un projet, une idée, une question ?
+ ++ simon@weko.io - 06 80 26 86 61 +
+{{ .content | markdownify }}
++ Je me présente Simon CONSTANS, passionné de l’informatique. + J’en ai fait mon métier en devenant ingénieur spécialisé dans le développement depuis 2009, + j’ai pu mettre à contribution mes compétences dans des startups avec des projets éthiques. +
++ Depuis 2017, je me renseigne énormément sur mon impact environnemental, + et prenant conscience que l’informatique n’était vraiment pas green, + je cherche des solutions concrètes pour réduire mon impact. +
++ Après 2 ans de recherches et tests, je lance Weko, dont l’objectif est d’informer localement + sur l’impact du numérique et proposer des alternatives que ça soit pour + les entreprises, les associations mais aussi les collectivités ou les particuliers. +
+N'hésitez pas à me contacter !
+Weko est une entreprise engagée !
+Elle fait partie de la Coopérative d'Activité et d'Emploi Talents Croisés et est accompagnée par un incubateur de l'Économie Sociale et Solidaire Ronalpia. Elle participe à l'association Digital League sur la partie Numérique Responsable.
+