Configuration initiale du projet et première version du site.
This commit is contained in:
commit
0ffe77ed47
20 changed files with 2158 additions and 0 deletions
10
.editorconfig
Normal file
10
.editorconfig
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
|
[*.{js,json,yml}]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = tab
|
||||||
|
indent_size = 2
|
||||||
4
.gitattributes
vendored
Normal file
4
.gitattributes
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
/.yarn/** linguist-vendored
|
||||||
|
/.yarn/releases/* binary
|
||||||
|
/.yarn/plugins/**/* binary
|
||||||
|
/.pnp.* binary linguist-generated
|
||||||
9
.gitignore
vendored
Normal file
9
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
# IDEA
|
||||||
|
*.iml
|
||||||
|
|
||||||
|
# Javascript
|
||||||
|
.yarn/
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Website
|
||||||
|
public/
|
||||||
1
.yarnrc.yml
Normal file
1
.yarnrc.yml
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
nodeLinker: node-modules
|
||||||
1
README.md
Normal file
1
README.md
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
# madeorsk.com
|
||||||
122
index.html
Normal file
122
index.html
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="fr">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
|
||||||
|
<title>Madeorsk</title>
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="./less/madeorsk.less" />
|
||||||
|
|
||||||
|
<script type="module" src="./src/website.ts"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header class="fakeart">
|
||||||
|
<h1>madeorsk</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section id="intro">
|
||||||
|
<h2 class="faketerm">welcome</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Bienvenue sur le terminal d'accès de l'espace personnel de <strong>madeorsk</strong>. Pas besoin d'enlever tes chaussures, tu es déjà dans le monde numérique. Je suis ravi que tu sois là, j'ai quelques petites choses à te montrer.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<noscript>
|
||||||
|
<p>
|
||||||
|
Je remarque que tu as désactivé Javascript. Tu as raison, mais tu te prives ici de quelques animations
|
||||||
|
sympathiques. Je t'invite donc à autoriser Javascript sur cette page. Pas de pisteurs ni de requêtes à des
|
||||||
|
sites bizarres, juste ce terminal.
|
||||||
|
</p>
|
||||||
|
</noscript>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="whoami">
|
||||||
|
<h2 class="faketerm">whoami</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Je suis développeur de logiciels et passionné d'informatique, particulièrement intéressé par les logiciels libres.
|
||||||
|
J'aime dire que je suis <em>forgeron numérique</em> : je souhaite construire des outils qui te servent dans tes tâches
|
||||||
|
du quotidien.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Être</strong>, c'est beaucoup, je n'ai jamais su si j'en étais vraiment capable. Au minimum
|
||||||
|
je peux te décrire ce que j'aime et n'aime pas, et ce que je souhaite profondément.
|
||||||
|
Ce sont les ingrédients de mon être. Pour le saisir avec plus de précision,
|
||||||
|
tu seras obligé de me parler (désolé...).
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>J'aime</strong> les ordinateurs, les fourmis, la musique qui donne de l'énergie, être seul, la pizza.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Je n'aime pas</strong> l'intolérance, le vent trop fort, me faire imposer quelque chose.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Je pense que</strong> la pleine liberté ne s'obtient qu'en étant tous égaux et bienveillants envers les autres.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Je ne pense pas que</strong> l'humain est bon par nature et que la société le dérègle, un
|
||||||
|
cadre est toujours nécessaire pour le maitriser.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<strong>Je rêve</strong> d'un monde ouvert et libre. <strong>Je rêve</strong> que chacun puisse disposer de quoi vivre dignement
|
||||||
|
et accomplir ses projets. <strong>Je rêve</strong> que la connaissance scientifique croisse et soit accessible à toutes et tous.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p><strong>On me trouve</strong> sur <a href="https://aleph.land/@Madeorsk">le fédivers</a>, <a href="https://codeberg.org/Madeorsk">Codeberg</a>, <a href="https://github.com/Madeorsk">Github</a>.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="projects">
|
||||||
|
<h2 class="faketerm">projects</h2>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
J'ai le malheur d'avoir beaucoup trop de choses dans la tête qui m'amène à un nombre impossible de choses
|
||||||
|
à gérer et faire. J'ai essayé de rassembler dans une liste de toutes les choses que je peux te montrer.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<span class="encrypted">encrypted</span>, un système de cloud privé performant, simple, chiffré et sécurisé. L'objectif
|
||||||
|
principal est de permettre une synchronisation entre plusieurs appareils, et la simplification des sauvegardes.
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span class="encrypted">encrypted</span>, un réseau de blogs décentralisés basés sur <a href="https://activitypub.rocks" target="_blank">ActivityPub</a> et les <a href="https://indieweb.org/Webmention" target="_blank">Webmentions</a>.
|
||||||
|
Je souhaite mettre l'accent sur l'utilisabilité, la lisibilité, et la simplicité de partage et de citation
|
||||||
|
d'un article. Je suis convaincu que l'avenir du web au format texte se joue de cette manière.
|
||||||
|
</li>
|
||||||
|
<li><strong>KernelUI</strong> : une bibliothèque de composants avancés pour React. <a href="https://code.zeptotech.net/UIKernel">Voir KernelUI</a></li>
|
||||||
|
<li><strong>Nest</strong> : un framework PHP nouvelle génération qui vise la production de bon code clair, simple et maintenable. <s><a>Voir Nest</a></s></li>
|
||||||
|
<li><strong>aleph.land</strong>, <strong>rudeshark.net</strong> : j'héberge ces nœuds de réseaux sociaux libres et décentralisés.</li>
|
||||||
|
<li>Je participe à <strong>fedi.monster</strong>, la plate-forme d'hébergement collective du fédivers. <a href="https://fedi.monster">Voir fedi.monster</a></li>
|
||||||
|
<li><strong>PollVerlaine</strong> : un logiciel auto-hébergé pour faire des sondages tout simples. <a href="https://git.madeorsk.com/Madeorsk/PollVerlaine">Voir PollVerlaine</a></li>
|
||||||
|
<li><strong>Sharkitek</strong> : un ensemble de bibliothèques pour simplifier les échanges de modèles entre un back-end quelconque et un front-end TypeScript. <a href="https://git.madeorsk.com/Sharkitek">Voir Sharkitek</a></li>
|
||||||
|
<li>Il y a longtemps, j'ai fait <a href="https://github.com/Madeorsk/EmojisFX">EmojisFX</a>, une bibliothèque pour gérer les emojis avec JavaFX.</li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="social">
|
||||||
|
<h2 class="faketerm">contact</h2>
|
||||||
|
|
||||||
|
<p>Par email, <a href="mailto:m@deor.sk">m@deor.sk</a>.</p>
|
||||||
|
<p>Par message privé (matrix), @Madeorsk:aleph.land.</p>
|
||||||
|
<p>Sur le fédivers, <a href="https://aleph.land/@Madeorsk">@Madeorsk@aleph.land</a> (ou <a href="https://rudeshark.net/@madeorsk">@madeorsk@rudeshark.net</a>).</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Je ne suis jamais fermé à la discussion. N'hésite pas.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
🄯 Madeorsk
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6
less/_colors.less
Normal file
6
less/_colors.less
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
|
||||||
|
@background: #141414;
|
||||||
|
@background-darker: #0C0C0C;
|
||||||
|
@background-darkest: #040404;
|
||||||
|
|
||||||
|
@foreground: #F9F9F9;
|
||||||
42
less/_common.less
Normal file
42
less/_common.less
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
html, body
|
||||||
|
{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-family: @font;
|
||||||
|
font-size: 1.075em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body
|
||||||
|
{
|
||||||
|
background: @background;
|
||||||
|
color: @foreground;
|
||||||
|
|
||||||
|
line-height: 1.6em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a
|
||||||
|
{
|
||||||
|
transition: opacity 0.2s ease;
|
||||||
|
|
||||||
|
border-bottom: solid @foreground thin;
|
||||||
|
color: @foreground;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
{
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul
|
||||||
|
{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
|
||||||
|
list-style: "– ";
|
||||||
|
|
||||||
|
> li
|
||||||
|
{
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
7
less/_encrypted.less
Normal file
7
less/_encrypted.less
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
.encrypted
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
width: 7em;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
35
less/_fakeart.less
Normal file
35
less/_fakeart.less
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
.fakeart
|
||||||
|
{
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 95%;
|
||||||
|
min-height: 15em;
|
||||||
|
height: 50vh;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.char
|
||||||
|
{
|
||||||
|
position: absolute;
|
||||||
|
animation: down-the-matrix linear infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes down-the-matrix
|
||||||
|
{
|
||||||
|
0%
|
||||||
|
{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-10em);
|
||||||
|
}
|
||||||
|
50%
|
||||||
|
{
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
100%
|
||||||
|
{
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10em);
|
||||||
|
}
|
||||||
|
}
|
||||||
21
less/_faketerm.less
Normal file
21
less/_faketerm.less
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
.faketerm
|
||||||
|
{
|
||||||
|
&::before
|
||||||
|
{
|
||||||
|
content: "$ ";
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after
|
||||||
|
{
|
||||||
|
content: "_";
|
||||||
|
animation: blink 1.5s step-end infinite;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes blink
|
||||||
|
{
|
||||||
|
50%
|
||||||
|
{
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
10
less/_fonts.less
Normal file
10
less/_fonts.less
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@import "@fontsource/iosevka-aile/400.css";
|
||||||
|
@import "@fontsource/iosevka-aile/400-italic.css";
|
||||||
|
@import "@fontsource/iosevka-aile/500.css";
|
||||||
|
@import "@fontsource/iosevka-aile/500-italic.css";
|
||||||
|
@import "@fontsource/iosevka-aile/600.css";
|
||||||
|
@import "@fontsource/iosevka-aile/600-italic.css";
|
||||||
|
@import "@fontsource/iosevka-aile/800.css";
|
||||||
|
@import "@fontsource/iosevka-aile/800-italic.css";
|
||||||
|
|
||||||
|
@font: "Iosevka Aile", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||||
9
less/_footer.less
Normal file
9
less/_footer.less
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
footer
|
||||||
|
{
|
||||||
|
margin: 3em auto auto auto;
|
||||||
|
padding: 3em 0;
|
||||||
|
|
||||||
|
font-size: 0.9em;
|
||||||
|
font-weight: 500;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
10
less/_header.less
Normal file
10
less/_header.less
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
|
||||||
|
header
|
||||||
|
{
|
||||||
|
h1
|
||||||
|
{
|
||||||
|
margin: 1em auto;
|
||||||
|
font-size: 2.5em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
less/_main.less
Normal file
21
less/_main.less
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
main
|
||||||
|
{
|
||||||
|
h2
|
||||||
|
{
|
||||||
|
margin: 1em auto;
|
||||||
|
font-size: 1.85em;
|
||||||
|
}
|
||||||
|
|
||||||
|
section
|
||||||
|
{
|
||||||
|
margin: auto;
|
||||||
|
width: 40em;
|
||||||
|
max-width: 95%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p
|
||||||
|
{
|
||||||
|
margin: 1em auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
10
less/madeorsk.less
Normal file
10
less/madeorsk.less
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
@import "_fonts";
|
||||||
|
@import "_colors";
|
||||||
|
|
||||||
|
@import "_common";
|
||||||
|
@import "_header";
|
||||||
|
@import "_faketerm";
|
||||||
|
@import "_fakeart";
|
||||||
|
@import "_encrypted";
|
||||||
|
@import "_main";
|
||||||
|
@import "_footer";
|
||||||
19
package.json
Normal file
19
package.json
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"name": "madeorsk",
|
||||||
|
"scripts": {
|
||||||
|
"build": "vite build",
|
||||||
|
"dev": "vite"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/node": "^22.5.4",
|
||||||
|
"less": "^4.2.0",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"typescript": "^5.5.4",
|
||||||
|
"vite": "^5.4.3"
|
||||||
|
},
|
||||||
|
"type": "module",
|
||||||
|
"packageManager": "yarn@4.4.1",
|
||||||
|
"dependencies": {
|
||||||
|
"@fontsource/iosevka-aile": "^5.0.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
83
src/website.ts
Normal file
83
src/website.ts
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
// Caractères.
|
||||||
|
const characters = "ʣʤʥʦʧʨʩʪʫʬʮʯɯɰɲɴɷ¿ÆÐÔÜĞĢĻŊŨŻŽƂƆƌΨΩΞΛϺϢϢϣϨϾЖѹѼ҉҈ҐҖӜӚߐߊ߈ߒݾߋك߉אڶےFA௵";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Obtient un caractère aléatoire.
|
||||||
|
*/
|
||||||
|
function getRandomCharacter(): string
|
||||||
|
{
|
||||||
|
return characters.charAt(Math.ceil(Math.random() * characters.length));
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simulation de portion chiffrée.
|
||||||
|
* @param element L'élément pour lequel générer du texte chiffré.
|
||||||
|
* @param charsCount Le nombre de caractères du texte chiffré.
|
||||||
|
*/
|
||||||
|
function fakeEncrypted(element: Element, charsCount: number): void
|
||||||
|
{
|
||||||
|
// Génération de caractères.
|
||||||
|
const chars = [...Array(charsCount)].map(getRandomCharacter);
|
||||||
|
element.textContent = "".concat(...chars);
|
||||||
|
|
||||||
|
// Génération de rotation : trouble entre -4° et +4° + on retourne parfois complètement le texte.
|
||||||
|
const randomRotation = (Math.round(Math.random()) * 180) + Math.ceil(Math.random() * 8) - 4;
|
||||||
|
element.setAttribute("style", "transform: rotate(" + randomRotation + "deg);");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Fait apparaitre un caractère dans la matrice de simulation d'art numérique.
|
||||||
|
*/
|
||||||
|
function spawnChar(): HTMLDivElement
|
||||||
|
{
|
||||||
|
// Création d'un nouvel élément de caractère aléatoire.
|
||||||
|
const charEl = document.createElement("div");
|
||||||
|
|
||||||
|
// Caractère animé.
|
||||||
|
charEl.className = "char";
|
||||||
|
|
||||||
|
// Initialisation de la position et de l'animation.
|
||||||
|
charEl.style.top = (10 + Math.round(Math.random() * 80)) + "%";
|
||||||
|
charEl.style.left = Math.round(Math.random() * 100) + "%";
|
||||||
|
charEl.style.animationDuration = (1333 + Math.round(Math.random() * 800)) + "ms";
|
||||||
|
charEl.textContent = getRandomCharacter();
|
||||||
|
|
||||||
|
// Changement de caractère régulier, aléatoirement.
|
||||||
|
const changeChar = () => {
|
||||||
|
charEl.textContent = getRandomCharacter();
|
||||||
|
window.setTimeout(changeChar, (500 + Math.round(Math.random() * 1000)));
|
||||||
|
};
|
||||||
|
|
||||||
|
// Lancement initial du changement de caractères.
|
||||||
|
window.setTimeout(changeChar, (500 + Math.round(Math.random() * 1000)));
|
||||||
|
|
||||||
|
return charEl;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* Simulation d'art numérique.
|
||||||
|
* @param element L'élément dans lequel générer l'art numérique.
|
||||||
|
*/
|
||||||
|
function fakeArt(element: Element): void
|
||||||
|
{
|
||||||
|
// On ajoute 150 caractères animés.
|
||||||
|
[...Array(150)].forEach(() => {
|
||||||
|
element.appendChild(spawnChar());
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
console.log("Bienvenue sur le terminal d'accès de l'espace personnel de madeorsk.");
|
||||||
|
console.log("Oh ?");
|
||||||
|
console.log("Tiens, tu es là. Je ne m'attendais pas à te trouver ici.");
|
||||||
|
console.log("Tu souhaites visiter l'arrière-boutique ? Pas de problème, tu es libre.");
|
||||||
|
console.log("Si tu veux voir le code source original, tu peux aller sur https://git.madeorsk.com/Madeorsk/madeorsk.com.");
|
||||||
|
|
||||||
|
// Activation du faux chiffrement des éléments chiffrés.
|
||||||
|
document.querySelectorAll(".encrypted").forEach((element) => {
|
||||||
|
const charsCount = element.textContent.length;
|
||||||
|
fakeEncrypted(element, charsCount);
|
||||||
|
window.setInterval(() => fakeEncrypted(element, charsCount), 100);
|
||||||
|
});
|
||||||
|
|
||||||
|
document.querySelectorAll(".fakeart").forEach(fakeArt);
|
||||||
|
});
|
||||||
10
vite.config.ts
Normal file
10
vite.config.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import {defineConfig} from "vite";
|
||||||
|
import {resolve} from "path";
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig(() => ({
|
||||||
|
build: {
|
||||||
|
outDir: resolve(__dirname, "public"),
|
||||||
|
emptyOutDir: true,
|
||||||
|
},
|
||||||
|
}));
|
||||||
Loading…
Add table
Reference in a new issue