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