fix: marquee css fix

.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.git

.gitea/workflows/deploy.yml

@@ -0,0 +1,30 @@
+name: Déploiement Docker Vite
+on:
+  push:
+    branches:
+      - blog-upload
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Clone the repo
+        uses: actions/checkout@v4
+
+      - name: Build docker image
+        run: |
+          docker build --no-cache \
+            --build-arg FORGE_URL="${{ vars.FORGE_URL }}" \
+            --build-arg FORGE_USER="${{ vars.FORGE_USER }}" \
+            --build-arg FORGE_REPO="${{ vars.FORGE_REPO }}" \
+            --build-arg FORGE_BRANCH="${{ vars.FORGE_BRANCH }}" \
+            -t klbr-blog .
+
+      - name: Build docker image
+        run: docker build -t klbr-blog .
+
+      - name: Delete old one
+        run: docker rm -f klbr-blog || true
+
+      - name: Run the container
+        run: docker run -d --name klbr-blog -p 8080:8080 klbr-blog

.gitignore

@@ -22,3 +22,5 @@ pnpm-debug.log*
 
 # jetbrains setting folder
 .idea/
+
+src/content/blog/*

CLAUDE.md

@@ -1 +0,0 @@
-AGENTS.md

Dockerfile

@@ -0,0 +1,22 @@
+FROM node:lts AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+
+ARG FORGE_URL
+ARG FORGE_USER
+ARG FORGE_REPO
+ARG FORGE_BRANCH
+
+ENV PUBLIC_FORGE_URL=$FORGE_URL
+ENV PUBLIC_FORGE_USER=$FORGE_USER
+ENV PUBLIC_FORGE_REPO=$FORGE_REPO
+ENV PUBLIC_FORGE_BRANCH=$FORGE_BRANCH
+
+RUN npm run build
+
+FROM nginx:alpine AS runtime
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+EXPOSE 8080

nginx/nginx.conf

@@ -0,0 +1,31 @@
+worker_processes  1;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  server {
+    listen 8080;
+    server_name   _;
+
+    root   /usr/share/nginx/html;
+    index  index.html index.htm;
+    include /etc/nginx/mime.types;
+
+    gzip on;
+    gzip_min_length 1000;
+    gzip_proxied expired no-cache no-store private auth;
+    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
+
+    error_page 404 /404.html;
+    location = /404.html {
+            root /usr/share/nginx/html;
+            internal;
+    }
+
+    location / {
+            try_files $uri $uri/index.html =404;
+    }
+  }
+}

package.json

@@ -14,5 +14,8 @@
   "dependencies": {
     "astro": "^7.1.6",
     "axios": "^1.19.0"
+  },
+  "devDependencies": {
+    "sharp": "^0.35.4"
   }
 }

pnpm-lock.yaml

@@ -14,6 +14,10 @@ importers:
       axios:
         specifier: ^1.19.0
         version: 1.19.0
+    devDependencies:
+      sharp:
+        specifier: ^0.35.4
+        version: 0.35.4
 
 packages:
 
@@ -355,160 +359,160 @@ packages:
     resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
     engines: {node: '>=18'}
 
-  '@img/sharp-darwin-arm64@0.35.3':
+  '@img/sharp-darwin-arm64@0.35.4':
-    resolution: {integrity: sha512-RMnFX7YQsMoh7lWfcM4NEHHymBX/rLuKNPVM84XE9ONPcaSCDgE7CHIHpSgPcO2xcRthgBy1HfNO319mwhIAkg==}
+    resolution: {integrity: sha512-Uhfl4V4lhP2nbUVF9+hyH1+luj86f1gUFeo8ALYxFoULoU+G87D43BfeMP8XHsk9boxAnCY/bf2EHwhA7MuGsA==}
     engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-darwin-x64@0.35.3':
+  '@img/sharp-darwin-x64@0.35.4':
-    resolution: {integrity: sha512-Xo+5uFBtLN0BKqieTxiFzFPQAUlBbbH5iBKyRX/z1JrbnYsHTfKJnUfL8+p2TPXr1pXqao4eeL4Rl144uDpK9w==}
+    resolution: {integrity: sha512-hWniXY3bG5qKpkKrAwPe4y+VTPmf086YQAnkxWh7uA1YrlRouWGa0M0Mxj3ZjnXFkv7/TD1bTy9lGUK26vRvWw==}
     engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-freebsd-wasm32@0.35.3':
+  '@img/sharp-freebsd-wasm32@0.35.4':
-    resolution: {integrity: sha512-lUxcqWIj2wMQ9BrwNjngcr1gWUr5xgaGThBRqPPalIC2n67Cqj1uPh8NnA/ZhAg8hUbKl+kVHKwgUIwe6ZYPrg==}
+    resolution: {integrity: sha512-lIsKw/BU+kjB4eZjxrYrZmwOJYi3Ajrv66iAlBmUPyKc3HpnloevB1g3wxGD9P/5BbQ1brBGl65VRRrCvQDEqA==}
     engines: {node: '>=20.9.0'}
     os: [freebsd]
 
-  '@img/sharp-libvips-darwin-arm64@1.3.2':
+  '@img/sharp-libvips-darwin-arm64@1.3.3':
-    resolution: {integrity: sha512-9J6ypZFpQBj4YnePGoq/S38w6nz+vqg5WZLrLGY4YuSemdMq47GMLBPO42MzwdGwpg/agZ7xzZcFHa48xlywfg==}
+    resolution: {integrity: sha512-suTBPTDGrI9WodccaDdwZItTSaBYASlBk1NSfElSHrUfzu3szG6lvIF58+WiFvnfzuK8ZBFS5zE00PxqxnRiPg==}
     cpu: [arm64]
     os: [darwin]
 
-  '@img/sharp-libvips-darwin-x64@1.3.2':
+  '@img/sharp-libvips-darwin-x64@1.3.3':
-    resolution: {integrity: sha512-m2pW1n6cns9VaubNwsZ+c3CRYjxNQWgJ5gPlnL1nbBcpkBvFm6SCFN5o0psFHI8w9n11NKhFkeEDns98tiqbEw==}
+    resolution: {integrity: sha512-FVJZ5mITMobmXIz/hPDTw0EintTW5H3WfrxwLqEqjiIihlu+hVRyGrFQ60xl0Lxn7Bt3zdpevPaQi0HEzqz9fw==}
     cpu: [x64]
     os: [darwin]
 
-  '@img/sharp-libvips-linux-arm64@1.3.2':
+  '@img/sharp-libvips-linux-arm64@1.3.3':
-    resolution: {integrity: sha512-dqVSFynCox4C/J8kT16V7SIFAns0IjgLwkvYT7p8LQVmJ5OS5b6tI9IGflxTeuBS//zXeFIUbwt5dwxyZ17cnA==}
+    resolution: {integrity: sha512-0DaL0A6Xu6sQSQFwe4iVCrKWU2cCTItnRsYsCdxAMm9NF6twAA9BKnoqy4hqz4+azQ0JHuA26qiUKsf1XJ/v5A==}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-arm@1.3.2':
+  '@img/sharp-libvips-linux-arm@1.3.3':
-    resolution: {integrity: sha512-1eMLzy92I4J6rmi4mAT8yC3HxOtniyGELlzGbNMLLeqe052ahFQ0h6LFq+lh5DsDIdYViIDst08abvSbcEdLXQ==}
+    resolution: {integrity: sha512-3rbU4vqXXc3hY/OiXdl52xZvT0F1yEngWfvqudtPJg/KkyiaQw2DRsFrNzpmLvfavbwOq3qXn36GP8obHRULQA==}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-ppc64@1.3.2':
+  '@img/sharp-libvips-linux-ppc64@1.3.3':
-    resolution: {integrity: sha512-3z0NHDxD6n5I9gc05U1eW1AyRm+Gznzq3naMrthPNqE6oYykcogW0l/jfpJdjYnuNl8R7yI9pNbE1XiUeyq0Aw==}
+    resolution: {integrity: sha512-cdn1OvUBwsXhbC0zSzJnNzf5MZ/mTrobawDvNXBTxe8VtqKAm0sRuEY2Evzovb/w9JMk4TvRxqt1mekSuJz64w==}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-riscv64@1.3.2':
+  '@img/sharp-libvips-linux-riscv64@1.3.3':
-    resolution: {integrity: sha512-bsb4rI+NldGOsXuej2r8OdSS8+zXDVaCWxyWrcv6kneTOlgAHtZABRzBBCwdsPiD90J4myNJuHpg6kA20ImW/w==}
+    resolution: {integrity: sha512-HjPVx7yKz+0lqdhDlTw1tt90wamBoxhiXpvl1XZpJLiHH4RCJ5yDTqH+VlYPv2fwFs89JFw4c1IexYOcQUi4IQ==}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-s390x@1.3.2':
+  '@img/sharp-libvips-linux-s390x@1.3.3':
-    resolution: {integrity: sha512-/ABshyj8gCpyIrNXnHn4LorDJ0HHm1VhXPBlxZ8zAtfVPAaSafXPGn+sUSIRiwaSBy0mmFjSjiXI5mkcwdChKQ==}
+    resolution: {integrity: sha512-neWLh+3yCNThxnfy3c4BbVBeGgt9aftno+XbT56iK28RgeDs3UOFWviLWlUu0bArYVYJaFDK+RRohbicUNCm8Q==}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linux-x64@1.3.2':
+  '@img/sharp-libvips-linux-x64@1.3.3':
-    resolution: {integrity: sha512-ITPEtgffGJ0S6G9dRyw/366tJQqFRcHWPHhC+Stpg3Z8AEMrDrTr2lhdz4f/Y/HMbRh//7Z5mBzEpVdi62Oc3w==}
+    resolution: {integrity: sha512-4vKmvAst9nrowcqquKFAyZJUDolUaIp8uRiN0mWFguJ1IplC9/pitXtlnnlU4aa/eJw3J7i67V+pwUL+wZGdsA==}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.3':
-    resolution: {integrity: sha512-zE9EdiUzUmg5mDT5a1rk5fYJ6GWPloTwWBYDS14naqHsL+EaMpDj1AWnpLgh3u0YCORv2Tt50wrcrpYqkP97Kw==}
+    resolution: {integrity: sha512-Y9kQaLMuNoB0bPYOOdcZMaseNrFpPodIWWMrx+CZyydf2xn68j9WYc6sWWRrDwNkzCQjKYfc68L7jKjGlHMibw==}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+  '@img/sharp-libvips-linuxmusl-x64@1.3.3':
-    resolution: {integrity: sha512-m0lrLiUt+lBYnCFr8qV/65yMR4E/c7/wf78I5eKTdkEakFAlZ9QlzEM3QIhhAwVeUhLAHLcCq7a7Vszq/oFNZQ==}
+    resolution: {integrity: sha512-fj8Mv0HHfD1Rr+4I68+3agJynxDWtBFgicTbSOb9Bke6pIwzGcJ+RX/yHjmiEGFMCavY/dxvem7MyNaJF+wDiw==}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@img/sharp-linux-arm64@0.35.3':
+  '@img/sharp-linux-arm64@0.35.4':
-    resolution: {integrity: sha512-QgKDspHPnrU+GQ55XPhGwyhC8acLVOOSyAvo1oVfFmrIXLkDNmGWzAfDZ4xK8oSA1qBQrALcHX0G5UZni/SuFQ==}
+    resolution: {integrity: sha512-De4jpEnAU8Hd5oT0j1G3uL4ZvTuipVMn7YC6vPaJhy6/7EwEae0SVAoBrUMYQbkLGDm85taVWwuPc1a44LTzCQ==}
     engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linux-arm@0.35.3':
+  '@img/sharp-linux-arm@0.35.4':
-    resolution: {integrity: sha512-affVWCTLooy8TSxbDx2qkzuDeaWLNVBA+P//FNBirHsXpP2fuBhk5AuboYUnrDnzoXes8GFjpTx0SBFOCRg+FA==}
+    resolution: {integrity: sha512-7OAS8gI0EReKGVN2HssHlM6umJgxF5VI3xN0p9FA91p/YO+ou5hiNghLdZ5BEHztwaaK5+bLKRf8x/o2L2nk9A==}
     engines: {node: '>=20.9.0'}
     cpu: [arm]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linux-ppc64@0.35.3':
+  '@img/sharp-linux-ppc64@0.35.4':
-    resolution: {integrity: sha512-sMd8rDxmpLOwv/7N44klFjOD5DUO7FLdjiXDI0hoxYaf7Ar262dQIEkosE98bps+5HPLtp/EvNqeqQtOycP/IA==}
+    resolution: {integrity: sha512-2oYZJeIl4kCcMGk4ouZVjnkCtFrpQFlNEtJ6GbxzhHQchwH0NH/qEb9ykmOl29dqwMq+JhFdZn+1ak2FKhI9fQ==}
     engines: {node: '>=20.9.0'}
     cpu: [ppc64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linux-riscv64@0.35.3':
+  '@img/sharp-linux-riscv64@0.35.4':
-    resolution: {integrity: sha512-0Eob78yjlYPfL5vMNWAW55l3R9Y6BQS/gOfe0ZcP9mEz9ohhKSt4im1hayiknXgf8AWrFqMvJcKIdmLmEe7yeQ==}
+    resolution: {integrity: sha512-cPbNChoRURAWdebDIHSenxRpgEdy7JkPydSnUxRm9VvKD7m0/xVaR/8Fzlu81pk5nHEvHH87UZUA7cTtwnbJSA==}
     engines: {node: '>=20.9.0'}
     cpu: [riscv64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linux-s390x@0.35.3':
+  '@img/sharp-linux-s390x@0.35.4':
-    resolution: {integrity: sha512-KgAxQ0DxpNOq1rG2t5cgTgShJFGSuU7XO45cqC+1NVOuZnP6tlgZRuSYOfNupGkHID0o3cJOsw4DVeJpMovcGw==}
+    resolution: {integrity: sha512-RY0JFY8Fd6RonCBtHz+DvadaPkXDSI1AUn6yWL9TipqkZ1vY8w8evqdgyDFnkm4/K1ve1TvZiaePP5oSd4+WVQ==}
     engines: {node: '>=20.9.0'}
     cpu: [s390x]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linux-x64@0.35.3':
+  '@img/sharp-linux-x64@0.35.4':
-    resolution: {integrity: sha512-8pqvxubL2PGdhlPy6GLqzDYMUjyRmKAwKHYKixpdJYBUK7PJ0C029XdsnpFIdgRZG68fZiGdHVWcKPvtiPB4cA==}
+    resolution: {integrity: sha512-9qvvEAuk8k89TfWUoX2htWjbAMX8p+NxCppjpcg5k6xMsjhBQPTsoIh36h9Qde4WRuGpJeYnOjdosDn/cnv+OA==}
     engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [linux]
     libc: [glibc]
 
-  '@img/sharp-linuxmusl-arm64@0.35.3':
+  '@img/sharp-linuxmusl-arm64@0.35.4':
-    resolution: {integrity: sha512-Vz0iQjzzcSX3HCbfwFfCSG/9SCIqyO0mH2sXyiHaAYfBk0cRsCWXRyQYX0ovCK/PAQBbTzQ0dsPQHh5MAFL59w==}
+    resolution: {integrity: sha512-KB5jxpfWQTr0nc3xdHtWChdbifHrBGsd2SM62Eyxrl8afikm+f5qGBU75SJIZBT/S1MC8XyacdlXBMSWq6OURA==}
     engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [linux]
     libc: [musl]
 
-  '@img/sharp-linuxmusl-x64@0.35.3':
+  '@img/sharp-linuxmusl-x64@0.35.4':
-    resolution: {integrity: sha512-6O1NPKcDVj9QEdg7Hx549EX8U0rp6yXQERqru6yRN7fGBn32UvIRJUlWnk+8xDCiG76hXVBbX82NZ/ZKr0euIg==}
+    resolution: {integrity: sha512-f+eZJZIQNEEd26RPSW+76chwOf1XtA2Y/O+5ocVyLliHkeih3e+jhLVBdNTd2rS3IbNXK8+ug93Vf5ZXtF5Lxg==}
     engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [linux]
     libc: [musl]
 
-  '@img/sharp-wasm32@0.35.3':
+  '@img/sharp-wasm32@0.35.4':
-    resolution: {integrity: sha512-cZ0XkcYGpHZkqW6iCkqTcmUC0CD9DhD5d/qeZlZkfRBn6GnHniZXLUo5+9xw8Iv76YE6LQFN9YNBlKREcCG76w==}
+    resolution: {integrity: sha512-zQnl4Kwp7Q6NHsENtU2T/00Zi+w3AQNwz3+UaTyVBy2FpXrzXzGjndpK61onhZjRtRpQXxCTeqw19bVyXOh7jA==}
     engines: {node: '>=20.9.0'}
 
-  '@img/sharp-webcontainers-wasm32@0.35.3':
+  '@img/sharp-webcontainers-wasm32@0.35.4':
-    resolution: {integrity: sha512-2rnq7bX3NzeR2T4YWgz8qiG4h3TSdMe+vN1iQXpJleSJ3SM5zQ8Fy2SyyXAWlbxpEZ2Y+Z4u1BePgJEYbSy80Q==}
+    resolution: {integrity: sha512-ESfNkywmCfPNyaZjxooddJQiQ+l/nTpGEOGthxiLnIHXC/CmcBixnfwUleX9mCz9ovrUUvKMap/pm8RYbzfwaA==}
     engines: {node: '>=20.9.0'}
     cpu: [wasm32]
 
-  '@img/sharp-win32-arm64@0.35.3':
+  '@img/sharp-win32-arm64@0.35.4':
-    resolution: {integrity: sha512-4bPwFdMbeC4JQ8L8LOyWp6nsHcboP5fxkp6iPOXz2Vg49R42TuMs2whkJ5OAP4/Ul035qOzy0AecOF9VOscn4w==}
+    resolution: {integrity: sha512-iNdlBX9gLVvqe2I3uIJSIKTq6wckP/DYxZtcqxm09x5Gi24DnFBmPAWZmr60ZyYMG0xlzo6goG3670ar+RXvRw==}
     engines: {node: '>=20.9.0'}
     cpu: [arm64]
     os: [win32]
 
-  '@img/sharp-win32-ia32@0.35.3':
+  '@img/sharp-win32-ia32@0.35.4':
-    resolution: {integrity: sha512-r53mXsBN6lFUDiST764SvgwUdHAqM4rPAiDzAmf4fLoB6X/rkfyTrLCg6+g17wJJiCmB3JYgHuUldCWUIRFSXw==}
+    resolution: {integrity: sha512-kqRsbaa5CS6KHlpxnN7WhE6vAAugXyZButpRdvDWetlv6Qv4N9WTcrWzF7tXfB9T7MsoadqdI8hmwLq6UlLvtw==}
     engines: {node: ^20.9.0}
     cpu: [ia32]
     os: [win32]
 
-  '@img/sharp-win32-x64@0.35.3':
+  '@img/sharp-win32-x64@0.35.4':
-    resolution: {integrity: sha512-D4y1vNeZrIIJCN+uHaWVtH86B+aCrdMYYjicy9pXHvbGZeGYLLSd3wdVuC37FxVXlU1ARsk84eKWfWMXGYEqvA==}
+    resolution: {integrity: sha512-XtmnYhBcrORsJ4XJngyzr/EWP0hRZLAZRFaApdKuviyqF78+ylxh2y06ZmtULAMOnObJ3ucpN0AcwSWnMowTRg==}
     engines: {node: '>=20.9.0'}
     cpu: [x64]
     os: [win32]
@@ -1295,8 +1299,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  sharp@0.35.3:
+  sharp@0.35.4:
-    resolution: {integrity: sha512-ej0zVHuZGHCiABXcNxeYhpRnPNPAcvbG8RMdBAhDAxLKkCRVSpK3Iyu7qbqw3JMzoj0REeM6f3tJLtVwl0023Q==}
+    resolution: {integrity: sha512-n++8XWcj+jCOr2IOl7h8LbKnGBDY4aPbmprMONBNFdn0ImXqpGVv5zliDs0V9HbmbCQLpbuo2ej9rAoOQTvMDA==}
     engines: {node: '>=20.9.0'}
     peerDependencies:
       '@types/node': '*'
@@ -1787,111 +1791,110 @@ snapshots:
   '@esbuild/win32-x64@0.28.1':
     optional: true
 
-  '@img/colour@1.1.0':
+  '@img/colour@1.1.0': {}
-    optional: true
 
-  '@img/sharp-darwin-arm64@0.35.3':
+  '@img/sharp-darwin-arm64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-arm64': 1.3.3
     optional: true
 
-  '@img/sharp-darwin-x64@0.35.3':
+  '@img/sharp-darwin-x64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.3
     optional: true
 
-  '@img/sharp-freebsd-wasm32@0.35.3':
+  '@img/sharp-freebsd-wasm32@0.35.4':
     dependencies:
-      '@img/sharp-wasm32': 0.35.3
+      '@img/sharp-wasm32': 0.35.4
     optional: true
 
-  '@img/sharp-libvips-darwin-arm64@1.3.2':
+  '@img/sharp-libvips-darwin-arm64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-darwin-x64@1.3.2':
+  '@img/sharp-libvips-darwin-x64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-arm64@1.3.2':
+  '@img/sharp-libvips-linux-arm64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-arm@1.3.2':
+  '@img/sharp-libvips-linux-arm@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-ppc64@1.3.2':
+  '@img/sharp-libvips-linux-ppc64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-riscv64@1.3.2':
+  '@img/sharp-libvips-linux-riscv64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-s390x@1.3.2':
+  '@img/sharp-libvips-linux-s390x@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linux-x64@1.3.2':
+  '@img/sharp-libvips-linux-x64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-arm64@1.3.2':
+  '@img/sharp-libvips-linuxmusl-arm64@1.3.3':
     optional: true
 
-  '@img/sharp-libvips-linuxmusl-x64@1.3.2':
+  '@img/sharp-libvips-linuxmusl-x64@1.3.3':
     optional: true
 
-  '@img/sharp-linux-arm64@0.35.3':
+  '@img/sharp-linux-arm64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.3
     optional: true
 
-  '@img/sharp-linux-arm@0.35.3':
+  '@img/sharp-linux-arm@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.3
     optional: true
 
-  '@img/sharp-linux-ppc64@0.35.3':
+  '@img/sharp-linux-ppc64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.3
     optional: true
 
-  '@img/sharp-linux-riscv64@0.35.3':
+  '@img/sharp-linux-riscv64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.3
     optional: true
 
-  '@img/sharp-linux-s390x@0.35.3':
+  '@img/sharp-linux-s390x@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.3
     optional: true
 
-  '@img/sharp-linux-x64@0.35.3':
+  '@img/sharp-linux-x64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.3
     optional: true
 
-  '@img/sharp-linuxmusl-arm64@0.35.3':
+  '@img/sharp-linuxmusl-arm64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.3
     optional: true
 
-  '@img/sharp-linuxmusl-x64@0.35.3':
+  '@img/sharp-linuxmusl-x64@0.35.4':
     optionalDependencies:
-      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.3
     optional: true
 
-  '@img/sharp-wasm32@0.35.3':
+  '@img/sharp-wasm32@0.35.4':
     dependencies:
       '@emnapi/runtime': 1.11.3
     optional: true
 
-  '@img/sharp-webcontainers-wasm32@0.35.3':
+  '@img/sharp-webcontainers-wasm32@0.35.4':
     dependencies:
-      '@img/sharp-wasm32': 0.35.3
+      '@img/sharp-wasm32': 0.35.4
     optional: true
 
-  '@img/sharp-win32-arm64@0.35.3':
+  '@img/sharp-win32-arm64@0.35.4':
     optional: true
 
-  '@img/sharp-win32-ia32@0.35.3':
+  '@img/sharp-win32-ia32@0.35.4':
     optional: true
 
-  '@img/sharp-win32-x64@0.35.3':
+  '@img/sharp-win32-x64@0.35.4':
     optional: true
 
   '@jridgewell/sourcemap-codec@1.5.5': {}
@@ -2113,7 +2116,7 @@ snapshots:
       yargs-parser: 22.0.0
       zod: 4.4.3
     optionalDependencies:
-      sharp: 0.35.3
+      sharp: 0.35.4
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -2739,38 +2742,37 @@ snapshots:
 
   semver@7.8.5: {}
 
-  sharp@0.35.3:
+  sharp@0.35.4:
     dependencies:
       '@img/colour': 1.1.0
       detect-libc: 2.1.2
       semver: 7.8.5
     optionalDependencies:
-      '@img/sharp-darwin-arm64': 0.35.3
+      '@img/sharp-darwin-arm64': 0.35.4
-      '@img/sharp-darwin-x64': 0.35.3
+      '@img/sharp-darwin-x64': 0.35.4
-      '@img/sharp-freebsd-wasm32': 0.35.3
+      '@img/sharp-freebsd-wasm32': 0.35.4
-      '@img/sharp-libvips-darwin-arm64': 1.3.2
+      '@img/sharp-libvips-darwin-arm64': 1.3.3
-      '@img/sharp-libvips-darwin-x64': 1.3.2
+      '@img/sharp-libvips-darwin-x64': 1.3.3
-      '@img/sharp-libvips-linux-arm': 1.3.2
+      '@img/sharp-libvips-linux-arm': 1.3.3
-      '@img/sharp-libvips-linux-arm64': 1.3.2
+      '@img/sharp-libvips-linux-arm64': 1.3.3
-      '@img/sharp-libvips-linux-ppc64': 1.3.2
+      '@img/sharp-libvips-linux-ppc64': 1.3.3
-      '@img/sharp-libvips-linux-riscv64': 1.3.2
+      '@img/sharp-libvips-linux-riscv64': 1.3.3
-      '@img/sharp-libvips-linux-s390x': 1.3.2
+      '@img/sharp-libvips-linux-s390x': 1.3.3
-      '@img/sharp-libvips-linux-x64': 1.3.2
+      '@img/sharp-libvips-linux-x64': 1.3.3
-      '@img/sharp-libvips-linuxmusl-arm64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-arm64': 1.3.3
-      '@img/sharp-libvips-linuxmusl-x64': 1.3.2
+      '@img/sharp-libvips-linuxmusl-x64': 1.3.3
-      '@img/sharp-linux-arm': 0.35.3
+      '@img/sharp-linux-arm': 0.35.4
-      '@img/sharp-linux-arm64': 0.35.3
+      '@img/sharp-linux-arm64': 0.35.4
-      '@img/sharp-linux-ppc64': 0.35.3
+      '@img/sharp-linux-ppc64': 0.35.4
-      '@img/sharp-linux-riscv64': 0.35.3
+      '@img/sharp-linux-riscv64': 0.35.4
-      '@img/sharp-linux-s390x': 0.35.3
+      '@img/sharp-linux-s390x': 0.35.4
-      '@img/sharp-linux-x64': 0.35.3
+      '@img/sharp-linux-x64': 0.35.4
-      '@img/sharp-linuxmusl-arm64': 0.35.3
+      '@img/sharp-linuxmusl-arm64': 0.35.4
-      '@img/sharp-linuxmusl-x64': 0.35.3
+      '@img/sharp-linuxmusl-x64': 0.35.4
-      '@img/sharp-webcontainers-wasm32': 0.35.3
+      '@img/sharp-webcontainers-wasm32': 0.35.4
-      '@img/sharp-win32-arm64': 0.35.3
+      '@img/sharp-win32-arm64': 0.35.4
-      '@img/sharp-win32-ia32': 0.35.3
+      '@img/sharp-win32-ia32': 0.35.4
-      '@img/sharp-win32-x64': 0.35.3
+      '@img/sharp-win32-x64': 0.35.4
-    optional: true
 
   shiki@4.4.1:
     dependencies:

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

src/components/Footer.astro

@@ -5,7 +5,7 @@ import "../styles/footer.css";
 <footer>
   <p>
     Réalisation <a
-      href="https://gitea.guams.fr/Guams/review-front"
+      href="https://gitea.guams.fr/Guams/kolibri_blog"
       target="_blank">open-source</a
     > par <a href="https://gitea.guams.fr/Guams" target="_blank">Guams</a>
   </p>

src/components/NavBar.astro

@@ -1,24 +1,39 @@
 ---
 import "../styles/navbar.css";
+const FORGE_URL = import.meta.env.FORGE_URL;
+const FORGE_USER = import.meta.env.FORGE_USER;
+const FORGE_REPO = import.meta.env.FORGE_REPO;
+const FORGE_BRANCH = import.meta.env.FORGE_BRANCH;
 ---
 
 <header>
   <nav>
     <ul>
-      <section>
-        <li><a href="/">Accueil</a></li>
-        <li><a href="/post-create">Créer un post</a></li>
-      </section>
-      <section>
-        <input type="text" placeholder="Rechercher..." />
-      </section>
-    </ul>
       <div>
-      <button>Se connecter</button>
+        <li><a href="/">Accueil</a></li>
-      <button>S'inscrire en tant que lecteur</button>
+        <li>
+          <!-- <a
+            target="_blank"
+            href={`${FORGE_URL}/${FORGE_USER}/${FORGE_REPO}/_upload/${FORGE_BRANCH}/`}
+            >Créer un post</a
+          > -->
+          <a
+            target="_blank"
+            href={`https://gitea.guams.fr/Guams/kolibri_blog/_upload/blog-upload/`}
+            >Créer un post</a
+          >
+        </li>
       </div>
+      <div>
+        <input id="searchBar" type="text" placeholder="Filtrer par titre..." />
+      </div>
+    </ul>
+    <div></div>
   </nav>
   <div>
-    <span> coucou !!</span>
+    <span
+      >Ein Kolibri (KLBR) dient als Verstärker für ein Führungskommando Falke
+      (FKLR)</span
+    >
   </div>
 </header>

src/components/PostCard.astro

@@ -6,8 +6,12 @@ const { id, title, description, pubDate, updatedDate, illustration } =
 ---
 
 <article>
-  <img src={illustration.src} />
+  <img src={illustration.src} alt="" />
-  <a href={`/posts/${id}`}><h1>{title}</h1></a>
+
+  <h2>
+    <a href={`/posts/${id}`}>{title}</a>
+  </h2>
+
   <time datetime={pubDate.toISOString()}>
     {
       pubDate.toLocaleDateString("fr-fr", {
@@ -15,7 +19,8 @@ const { id, title, description, pubDate, updatedDate, illustration } =
         month: "short",
         day: "numeric",
       })
-    }</time
+    }
-  >
+  </time>
-  <span>{description}</span>
+
+  <p>{description}</p>
 </article>

src/content/blog/analyse-aprofondie-de-goodbye-eri/index.md

@@ -3,54 +3,61 @@ title: "Analyse approfondie de Goodbye Eri"
 pubDate: 2024-11-30
 description: 'Dans ce post j''analyse le one shot "Goodbye, Eri" écrit par Tatsuki Fujimoto. J''y aborde beaucoup d''aspects du manga comme la mémoire humaine, la spontanéité des uns qui vient en opposition avec l''hypocrisie des autres et plein d''autres thèmes ! Disclaimer : Tout comme mon post sur "Persona 3 Reload - Episode Aigis", je spoil l''intégralité de l''oeuvre.'
 author: "Guams"
-illustration: "image.png"
+illustration: "illu.jpg"
 tags: ["Manga"]
 ---
 
-# Introduction
+## Introduction
 
 Après avoir vu en avant-première “Look Back” au cinéma écrit par Tatsuki Fujimoto et produit ainsi que réalisé par Kiyotaka Oshiyama. J’ai été sincèrement touché par le film et j’ai décidé de lire “Goodbye, Eri” (ou “Sayonara Eri” (⸝⸝⸝O﹏ O⸝⸝⸝)), un autre one shot de Fujimoto. Et mon dieu que c’était cool à lire, si vous ne l'avez pas encore lu, je vous le conseille grandement, c’est vraiment très rapide à lire (200 pages).
 
 Tout ça pour dire que : dans ce post, je vais analyser “Sayonara Eri” que ce soit dans la mise en scène, la famille de Yuta (le protagoniste) et son premier film qui d’extérieur paraît éthiquement questionnable mais est bien plus profond que ce que les figurants du manga pensent.
 
-# Mise en contexte
+## Mise en contexte
 
 <u>DISCLAIMER</u> : “Goodbye, Eri” est très flou dans son récit, l’un des thèmes de l'œuvre est la difficulté de discerner la réalité de la fiction. Par conséquent le manga est raconté de manière à laisser planer le doute, donc beaucoup d’éléments (surtout la fin) sont très sujets à interprétation. Et cette analyse sert uniquement ma vision des choses, ma perspective en ce qui la concerne.
 
 Le manga commence avec Yuta qui filme l’anniversaire de ses 12 ans avec le nouveau téléphone que lui a offert sa mère, tout le monde paraît heureux sur la vidéo jusqu’à que sa mère lui fasse comprendre qu’elle va bientôt mourir, cela met évidemment mal à l’aise Yuta et son père, mais celle-ci insiste et demande à ce que Yuta filme tous les moments passés avec elle désormais pour que quand elle rendra l’âme, il puisse se souvenir des bons moments passés avec elle. L’intrigue parle donc de Yuta qui enregistre le quotidien de sa mère. On remarque que malgré sa maladie, sa mère reste très souriante, tandis qu’en parallèle, quand son père est seul, il pleure. En fait on verra plus tard que le père est très spontanée dans sa manière d’être, ce qui vient en total contraste avec sa mère qui est très fausse. Dès le début, on a une ambiance assez lourde. On ne voit que par la caméra de Yuta, on n’a donc aucun contexte de pourquoi la mère est malade, et de pourquoi le père pleure. En revanche, on sent l’attention innocente de Yuta pour ses parents et son inquiétude sur leur état de santé (mentale pour le père et physique pour la mère).
-![alt text](image.png)
+![img1](img1.jpg)
 
 Un jour, lorsqu’il filmait les fourmis de son jardin, son père lui demande de venir à l'hôpital car sa mère est actuellement en train de vivre ses derniers moments. Quand ils arrivent devant l'hôpital, Yuta se met à courir, la caméra en main comme s’il essayait de fuir la réalité. Puis on a un plan de Yuta qui court avec l'hôpital en fond, puis… L'hôpital explose et la planche d’après on voit des élèves du collège de Yuta qui regardent ce qui semble être un film, en fait depuis le début nous sommes spectateurs du film de Yuta intitulé “Dead explosion mother”.
+![img2](img2.jpg)
 
 Tout le monde pense que ce film est complètement irrespectueux envers sa défunte mère, il subit des moqueries pour être aussi “bizarre” parce que… En effet, qui aurait filmé sa mère jusqu’à sa mort et l’aurait montrée à son collège, et aussi, une question qui lui est posée par l’une de ses camarades et son prof : “Pourquoi avoir fait exploser l'hôpital ? ”Apparemment ce serait d’après Yuta “Parce que c’est génial !”. Après pas mal de moqueries de la part de ses camarades, Yuta a eu la brillante idée de faire une vidéo de son suicide depuis le toit de l’hôpital. Mais une fille sur le toit de l’hôpital lui demande de se suicider autre part parce que cela nuirait à la réputation de l'hôpital. Cette fille est Eri !
+![img3](img3.jpg)
 
 Ensuite, elle lui demande si c’est bien l’auteur de “Dead explosion mother”. Il s’avère qu’elle est une grande fan de son œuvre. Connaissant les critiques qu’a reçu le film, elle l’emmena dans un bâtiment désaffecté avec un canapé, un vidéoprojecteur et une pile de 9 h de film. Par la suite, de par leur passion commune (le cinéma), se crée une relation entre les deux.
 
 C’était mon résumé non exhaustif du début de l’histoire. Pour la suite je te conseille d’aller lire le manga toi-même pour te faire ton propre avis, les interprétations sont très subjectives en ce qui concerne l’histoire
 
-# La famille de Yuta
+## La famille de Yuta
 
 Dans “Goodbye, Eri” la famille de Yuta est assez spéciale. Premièrement, la mère de Yuta était de ce qu’on sait productrice d’émission télévisée, donc elle a déjà de l’expérience avec les caméras et a naturellement transmis son attrait pour le domaine à son fils. Je trouve que Yuta est réellement endoctrinée par sa mère, paraissant parfaite à la caméra mais très manipulatrice et obsédée par ce film (beaucoup plus que Yuta en tout cas) sans les caméras. Un père très retiré et inactif, un père malheureux qui n’ose dire non à rien, par exemple il n’a même pas bronché lorsque sa mère a proposé l’idée de réaliser ce film (pourtant la proposition est vraiment très déplacée), il se contente de pleurer dans son coin et d’accepter son sort. Après la mort de sa femme, il était absent, du moins assez absent pour ne pas s’occuper de son fils dépressif et suicidaire. Les parents ont même une relation étrange entre eux, le père paraît soumis, quand sa femme est mourante sur son lit d’hôpital, il va filmer ses derniers instants comme elle le voulait. Il a mentionné que Yuta ne voulait pas voir sa mère mourir alors il n’a pas pu se résoudre à venir la voir, ce qu’elle répondit “Ce garçon a été inutile jusqu’à la fin”, ce sont ses derniers mots. Ici, on voit clairement comment sa mère est réellement dérangée. Yuta dans cette œuvre a un rapport étrange avec sa famille, surtout avec sa mère avec qui il a une relation très toxique.
+![img4](img4.jpg)
 
 Enfin, on peut noter que la mère voulait paraître parfaite pour les caméras, avec à la clé un potentiel gain de popularité. C’est là qu’on voit que Yuta tient de sa mère, en montrant son film à son collège, il espère plus d’acceptation de la part de ses camarades, à l’image de sa mère, il veut être populaire. Quand son film a flop, il voulait en faire un deuxième pour prouver aux autres qu’ils avaient tort de ne pas considérer son film à sa juste valeur. Finalement, le père est le seul à ne pas vivre pour les caméras dans cette famille.
 
-# Qui est Eri ?
+## Qui est Eri ?
 
 Eri reste assez mystérieuse tout du long de l’oeuvre, concrètement elle est assez secrète, indifférente mais elle émane une aura assez bienveillante, par exemple dès le début après avoir amené Yuta regarder des films avec elle, Eri va se passer de lui dire pourquoi et cela pendant 9h mais malgré son air insaisissable, c’est quelque chose qui a clairement fait du bien à Yuta puisqu’il avait à ce moment des envies suicidaires.
+![img5](img5.jpg)
 
 En clair, on ne discerne pas ses intentions, mais elles sont bienveillantes. On découvre plus tard (après les 9h de films) que Eri souhaite perfectionner l’art cinématographique de Yuta car elle a repéré quelque chose de novateur dans son travail. En quelque sorte, à ce moment, elle lui donne une raison de vivre après une épreuve aussi dure que la perte d’un être cher. On voit au fil des pages une espèce de romance se dessiner entre les deux. Tandis que Yuta continue de réaliser son deuxième film tout en se cultivant avec elle. Au bout d’un moment, le schéma se répète et soudainement Eri a l’air d’être atteinte d’une maladie incurable (comme la mère de Yuta finalement…) puisqu’elle se retrouve à l'hôpital très fréquemment à partir de ce moment et Yuta n’en savait absolument rien, ce qui vient appuyer son côté vraiment taciturne et réservé. Eri, tout du long du manga, elle va garder le sourire malgré sa mort certaine. On sait de quoi elle est atteinte seulement à la fin du manga, quand Yuta, à la trentaine après un accident de voiture qui a anéanti toute sa famille, décide de se suicider dans un endroit qu’il aime (comme à l’époque). Ce qui l’amène dans le bâtiment désaffecté où l’avait amenée Eri à l’époque et… C’est alors qu’il la voit regarder un film (les 2,728 h d’enregistrement de Yuta) à cet endroit, elle est bel et bien vivante et physiquement elle n’a pas vieilli. Pendant qu’il pense halluciner et devenir fou, elle lui explique qu’elle est vraiment un vampire et ne peut pas mourir de vieillesse, que sa “mort” a été causée parce que la mémoire humaine est limitée en souvenirs. Celle qui est morte, c’est l’ancienne Eri, maintenant on a une nouvelle Eri qui n’a aucun souvenir de ce qu’elle était avant autre que ce qu’elle a vu dans le film et les enregistrements de Yuta. Et c’est en grande partie pour ça qu’elle voulait que sa mort soit filmée, pour qu’elle puisse se souvenir de qui elle aurait aimé être, de qui était Yuta et la nature de la relation qu’elle aurait aimé avoir avec Yuta si elle était l’idéal qu’elle jouait dans le film. Une preuve d’amour immense, c’est un peu sa manière de s’accrocher à sa vie, se forger des souvenirs de ce qu’elle était et de ce qu’elle aimait pour plus tard être ce qu’elle aurait aimé être avec Yuta. À contrario, on pourrait aussi penser qu’elle voulait uniquement se créer une image d’elle glorifiée, un peu comme si elle était une fille parfaite.
 
-# La fin
+## La fin
 
 Je trouve la fin du manga grandiose car d’un côté on sait tout (qui est Eri et ce qui manquait au deuxième film de Yuta) et d’un autre on ne sait rien. Je m’explique : Yuta retrouve Eri qui lui fait comprendre qu’elle est bel et bien un vampire et c’est pour ça qu’elle a survécu, mais d’un autre côté on ne sait pas si ce qui est raconté est vrai, en fait ça paraît trop étrange… Comme par hasard Eri est un vampire dans le deuxième film de Yuta et il s’avère qu’elle en est réellement un, sans parler de si un vampire peut potentiellement exister dans l’oeuvre, on peut penser que Yuta a juste terminé son film de la sorte parce que c’est ce qu’il avait imaginé dans le scénario. D’autre part, on n’a jamais vu Eri mourir, Yuta aurait très bien pu faire croire à sa mort, faire croire à un accident de voiture qui aurait tué toute sa famille. En fait on ne sait même pas si tout ce qu’on lit depuis le début est vrai, ou s'il s'agit d’une fiction. Enfin, en ce qui me concerne, je pense que ce qui manquait à son film, c’est évidemment une touche de fantaisie. Il a choisi de faire la même chose qu’il avait fait pour sa mère, c'est-à-dire exploser le bâtiment (AU MONTAGE !!!). C’est donc comme ça que nous quittons l'œuvre, en doutant ! Nous n’avons rien appris à propos de Yuta, ni à propos de Eri, la seule chose qu’on peut considérer comme véridique c’est tout le message que Yuta a voulu nous transmettre !
+![img6](img6.jpg)
 
-# Pourquoi l’oubli sublime le souvenir
+## Pourquoi l’oubli sublime le souvenir
 
 Dans cette section j’aborde l’aspect philosophique du manga, un des points centraux du manga : Les souvenirs. “Goodbye, Eri” est étroitement lié à la mémoire humaine et la manière dont on sélectionne les souvenirs, le manga nous fait comprendre que même si la mère de Yuta est abusive, ce qui importe, c’est de comment Yuta s’en souviendra, en effet Yuta a gardé le meilleur de la relation avec sa mère, et si jamais il veut repenser à sa mère il n’a qu’à revoir son film, il n’en tirera que des souvenirs positifs car, c’est ce qu’il fait dans son film. Ce que le manga nous rappelle, c’est qu’avec le montage tout est possible, même se faire passer pour ce qu’on n’est pas. Cela m’amène donc à réfléchir sur qui les personnages du manga sont-ils vraiment. Sont-ils tous vraiment comme ils le paraissent? On ne le sait pas parce que l’un des thèmes principaux du manga est qu’on ne sait pas ce qui est réel ou ce qui ne l’est pas (en fait si ça se trouve Yuta est un réel enfoiré et il nous manipule tous tah Ayanokoji dans “Classroom of the elite”). Une leçon déjà donnée dès la révélation de la vidéo lors de la mort de la mère de Yuta, après que Yuta l’ait vue, il s’est soudainement remémoré de comment était réellement sa mère (c’est une dinguerie comment elle vit pour les caméras). En tout cas, peu importe comment les gens sont vraiment, une fois qu’ils sont partis, s'ils nous sont chers, l’important est de comment on s’en souvient, pas de comment ils étaient, voilà pourquoi je pense que l’oubli fait briller de plus belle le souvenir. Voici, pour conclure la section, l’avis d’une des camarades de classe de Yuta et l’une des seules amies d’Eri. Quand Yuta a choisi de filmer Eri pour son second film afin d’en ressortir le meilleur, en réalité, sa camarade dit que Eri était “plutôt une conne” et égocentrique. Malgré ses déclarations, elle se souviendra d’elle comme d’une fille bien.
+![img7](img7.jpg)
 
-# Le dynamisme des planches
+## Le dynamisme des planches
 
 Rien à voir, mais petite section de transition concernant les planches. Je trouve que Fujimoto est très doué pour faire des planches originales dans ses mangas, mais celles de “Goodbye, Eri” sont les plus originales pour moi, en fait, les planches servent vraiment beaucoup l’immersion. On a tout le temps le point de vue de la caméra, ce qui sublime l’immersion, c’est l’impression de mouvement de par le focus de la caméra, les tremblements. En fait, on ressent vraiment que tout est filmé par téléphone. Voici une page pour illustrer mes propos :
+![img8](img8.jpg)
 
 On peut aussi noter qu'il ya très peu de planches focalisées sur Yuta et que la plupart sont des visions larges du panorama. Cela renforce le côté filmé avec une caméra. Pour revenir sur la fin du manga, on peut faire un parallèle avec la tirade de fin ou Yuta dit qu'il n'était qu'un spectateur tout au long de sa vie. ce qui se retranscrit sur le fait que Yuta n'est presque jamais présent sur les planches du manga.
 Conclusion

src/content/blog/analyse-de-fire-punch/index.md

@@ -3,79 +3,103 @@ title: "Analyse de Fire Punch"
 pubDate: 2025-07-29
 description: "Voici mon analyse concernant Fire Punch, j'aborde pas mal d'aspects du manga comme la place importante qu'ont la religion et le cinéma !"
 author: "Guams"
-illustration: "image.png"
+illustration: "illu.jpg"
 tags: ["Manga"]
 ---
 
-# Introduction
+## Introduction
 
 Coucou, ça fait un certain temps que je n'ai pas posté. Pas mal de choses ont fait que je n'ai pas pu poster. Mais je reviens avec l’analyse d’un manga que j’ai lu récemment, il m’a vraiment bouleversé. J’ai englouti les 8 tomes en 4 jours. Dans ce post je vais partager ma vision sur pas mal d’aspects de Fire Punch, le premier manga écrit (pour changer) par Tatsuki Fujimoto. Je vais aborder l'œuvre plus sans particulièrement expliquer l'histoire, donc il est fortement conseillé d’avoir lu le manga ou du moins le connaître dans sa globalité pour apprécier/comprendre cette analyse.
-Mise en contexte
+
+## Mise en contexte
 
 Dès les premières pages du manga, il nous est expliqué que le monde a été plongé dans une ère glaciaire à cause d’une certaine “Sorcière de glace”. Il existe aussi des humains doués de pouvoir surnaturel qu’on appelle “élus”. Notre protagoniste Agni réside dans un village avec sa sœur Luna, c’est un élu capable de régénération rapide et on comprend assez vite que les villageois se sont résolus à manger de la chair humaine pour survivre. Ils profitent donc de la faculté de régénération d’Agni qui fait don de ses membres (coupé au préalable par sa propre sœur à coups de hache) au villageois. Malgré la famine, Agni et Luna vivent une vie simple et ont de quoi vivre heureux. Malgré certains penchants… euh… incestueux de Luna.
+![img1](img1.png)
 
 Cette planche appuie l’absence de valeur sociale, la morale est presque anecdotique, les villageois sont déjà réduits à leur état le plus primitif pour avoir à manger de la chair humaine mais la morale n’est pas indispensable à la survie, alors on penche vers des interdits sociétaux.
 
 Puis, un jour, pendant qu’Agni chasse du chevreuil, il voit un avion passer au-dessus du village. Ce sont des soldats revenant d’une bataille, ils viennent se servir dans les maigres provisions du village. Doma, le leader ordonne donc à ses hommes de fouiller les maisons. Sans surprise, les villageois se retrouvent méprisés car ils sont réduits à être cannibales pour survivre et pris pour des sauvages. Doma, se considérant comme supérieur à ces barbares se considérant comme un élu. Il décida de brûler le village grâce à son pouvoir qui lui permet de brûler n’importe quel être vivant jusqu’à ce que mort s’ensuive.
+![img2](img2.png)
 
 Mais notre protagoniste, grâce à (ou à cause) de sa faculté de régénération survit à ce massacre en voyant sa sœur ainsi que tout le village brûler sous ses yeux impuissants, tandis qu’il est condamné à subir des flammes qui le rongent en permanence. Ensuite, il va se tordre de douleur 8 ans durant en ne pensant qu’à une seule chose : “Venger sa sœur en traquant Doma”. C’est là que commence vraiment Fire Punch.
+![img3](img3.png)
 
-# La place de la religion
+## La place de la religion
 
 La religion est un thème assez important dans l'œuvre, elle est au centre de beaucoup de sujets et amène à réfléchir. Pour un peu de remise en contexte, on est dans un monde dévasté par une ère glaciaire, l’humanité n’en a plus pour longtemps et, surtout, elle ne sait plus à quoi se raccrocher.
 
 Un monde où la morale est oubliable à cause d’un retour à un état primitif des civilisations pour assurer leur survie. Plus rien n’a de sens. La vie est absurde, alors pourquoi vivre ? La religion apporte des réponses à ce “pourquoi” et c’est ce qui est utilisé pour gouverner les foules, elle sert à apporter la cohésion pour le “bien” collectif. Du moins c’est ce qui est dit par ceux qui la façonnent. Dans Fire Punch on a cette notion de religion fallacieuse qui gouverne les masses.
+![img4](img4.jpg)
 
 Par exemple, quand Agni libère les prisonniers et les consommables à Behemdolg. La première idée qui leur est venue en tête c’est qu’un miracle est arrivé et que cet homme est une divinité. Une idée qui rassure par son manque de fondement. Agni est un dieu venu libérer les opprimés et si son corps brûle c’est par son pouvoir divin, ici les prisonniers ne se demandent pas “comment” mais uniquement “pourquoi". Dans un monde où le rationnel n’est plus, le fait de se demander “pourquoi” leur apporte non seulement une cause, mais aussi une raison d’être. Vivre pour “seigneur Agni”.
 
 Car en effet, le “pourquoi” apporte une explication (fondée ou non) à un fait tandis que le “comment” explique la cause du “pourquoi”. On a donc le “comment” qui apporte une explication réfléchie d’un fait qui vient en contradiction avec le “pourquoi” qui apporte une hypothèse pas forcément fondée afin d’expliquer un fait.
+![img5](img5.jpg)
 
 Comme le souligne très bien Togata avec une pointe d’humour : Agni n’est pas ce que les gens prétendent, l’image du “seigneur Agni” n’est qu’une interprétation complètement irrationnelle façonnée par des hommes dont la vie est dénuée de sens.
 
 Peu à peu, les gens bâtissent un culte autour d’Agni, le hissant au rang de divinité. Ironiquement, il finit par incarner exactement ce qu’il a toujours détesté. Sa "religion" devient un outil de manipulation pour certains, menant inévitablement à des tragédies, comme celle qu’il a vécue avec la mort de sa sœur et la destruction de son village.
 
-# La déshumanisation du protagoniste
+## La déshumanisation du protagoniste
 
 On retrouve là un Agni prêt à tout pour protéger sa “soeur”. Le problème est que ça en arrive à un niveau obsessionnel où ça le rend très antipathique et psychopathe. On le voit très peu sourire à part quand il parle à Luna. Cette obsession se remarque notamment quand il apprend que Luna n’est pas complètement en sécurité car le groupe d’hommes qui les ont précédemment menacés est capable de représailles, c’est alors que pendant la nuit il s’immole la face afin de se transformer en Fire Punch, se déroule alors un massacre sans précédent dont il ne se souvient pas. C’est comme si Fire Punch était une autre facette de sa personnalité: sans pitié, assoiffé de sang. En se réveillant il se rappelle de son “objectif” initial : Sauver une femme faite prisonnière. Mais il se remémore que sa survie l’importe peu, finalement seul Luna compte. Cette constatation souligne son manque de remords évident.
+![img6](img6.jpg)
 
 Son côté psychopathe s’explique aussi et surtout par sa manière de manipuler les autres, on est clairement dans la tête d’un déséquilibré à ce moment dans le manga. Par exemple, son effet de régénération fonctionne parfaitement bien, mais il continue de se couper le bras à la hache à chaque fois qu’il doit retourner au camp pour que ses camarades ne remarquent rien. Même sa manière d’être avec les autres est fausse. Intérieurement il est vide, on sent clairement que son passé lui pèse.
+![img7](img7.jpg)
 
 C’est quand même plutôt compliqué de faire rentrer Agni dans des cases car il a beau paraître comme un psychopathe à certains moments, on voit vraiment qu’au fond il est resté le même, il se cache juste derrière une carapace. La seule chose qui le rend heureux, c’est de voir les autres heureux car il est persuadé de ne pas pouvoir vivre trouver le bonheur. Et il se hait car il est devenu ce qu’il a toujours haï jusqu’à présent, voire pire.
+![img8](img8.jpg)
 
 Après tout, Agni est juste un homme simple qui veut vivre normalement mais il n’en a jamais eu l’occasion et les seuls moments où qui l’ont rendu heureux étaient en vivant avec sa sœur. Et c’est sans doute pour ça qu’il fait une fixette sur elle, car il souhaite une vie simple. On remarque que Fujimoto a le même procédé avec Denji dans Chainsaw Man : un adolescent perdu qui souhaite vivre simplement.
-La transidentité dans l’oeuvre
+
+## La transidentité dans l’oeuvre
 
 Une fois que Togata a aidé Agni à fonder son culte autour de Fireman, un des fidèles du seigneur ayant comme pouvoir de lire dans les pensées vient annoncer à Agni qu’il a lu dans les pensées de Togata. Il a trouvé utile d’expliquer (très maladroitement) à Agni qu’il pense que Togata se joue de lui, qu'elle le considère comme son outil et que c’est intérieurement un homme. Mis à part les suppositions sur si elle manipule Agni ou non, la manière du fidèle d’exposer la transidentité de Togata montre très clairement le manque de sensibilisation sur le sujet. Il le dit comme si ça allait appuyer son argumentation alors qu’en réalité ça n’a juste rien à voir. Et ça va très sérieusement fâcher Togata comme on le voit par la suite, puisqu’elle fugue.
+![img9](img9.png)
+![img25](img25.jpg)
 
 Je trouve ce passage plutôt intéressant car dans un monde où l’humanité est réduite à ses besoins primaires, les gens ne prennent pas le temps de s’attarder sur ce qui n’est pas important pour leur survie. Car depuis l'ère glaciaire, la technologie a régressé tout autant que les mentalités.
 
 _(Petit exemple des mentalités moyenâgeuse)_
+![img10](img10.png)
 
 Alors, au vu d’un problème social aussi complexe que la transidentité, c’est alors normal que Togata se sente seule car elle est l’une des seules à hériter de l’ancienne civilisation.
 
 C’est d’autant plus triste pour Togata car elle est forcée de vivre dans un corps de femme. Pourquoi? À cause de sa faculté de régénération, elle n’a jamais pu se faire opérer, elle est donc condamnée à s'auto-convaincre d’être ce qu’elle n’est pas. Et ça ne se limite pas à ça, c’est pour elle une souffrance d’être considérée comme une fille car c’est l’apparence physique qui définit un individu (au premier abord). On constate que la situation de Togata est similaire à celle d’Agni, Agni veut seulement vivre une vie normale mais n’est absolument pas normal, destiné à être idolâtré comme un dieu de par son apparence physique. Tandis que Togata est condamnée à être socialement considérée comme une femme alors qu’elle voudrait être un homme. C’est vraiment super intelligent d’avoir pensé à ça, c’est un sujet très peu souvent abordé (du moins je ne connais pas de manga abordant la transidentité) et il est abordé de manière habile grâce au pouvoir de Togata.
 
 Par ailleurs, je trouve cette scène plutôt amusante, elle témoigne de leur caractère enfantin et c’est notamment en partant de cette scène que les deux vont commencer à se rapprocher.
+![img11](img11.jpg)
+![img12](img12.jpg)
 
-# Le cinéma dans Fire punch
+## Le cinéma dans Fire punch
 
 Fire Punch me fait penser à Goodbye Eri sur certains points. Premièrement: la mise en scène. En effet, l'introduction de Togata est présentée à la manière d’un “vlog” ou d’un “found footage”, on comprend immédiatement à sa manière de parler et au plan fixe des planches que le lecteur a le point de vue de la caméra.
+![img13](img13.jpg)
 
 Mise à part les plans, Togata est la personnification de l’amour de Fujimoto pour le cinéma, en quelques sortes. Il parle de sa passion depuis le personnage de Togata, autant dans les dessins que dans les dialogues. Sans cinéma, la vie de Togata n’a pas d’intérêt, sa vie est vide, vide de sens. Alors tout au long de l'œuvre, elle manifeste sa seule raison d’être: le septième art. Et ça se voit par la réalisation de son film autour de Fireman.
+![img14](img14.jpg)
 
 Aussi, tout au long du manga, Togata nous fait des références cinématographiques, que ce soit Matrix ou bien Spiderman.
+![img15](img15.png)
 
 Mais encore et surtout, le paradis est symbolisé par un cinéma. Et la mort de Togata y est grandiose grâce à ça. Car dans toutes les œuvres de Fujimoto on a une place particulière du cinéma. Par exemple Goodbye Eri qui est clairement un hommage à celui-ci, ou encore dans Chainsaw Man avec la scène du cinéma entre Denji et Makima. Ici dans Fire Punch, la symbolique est centrale: le paradis est une salle de cinéma sans fin et on y visionne sa vie.
+![img16](img16.jpg)
+![img17](img17.jpg)
+![img18](img18.jpg)
 
 En plus d’avoir une fin touchante, la dernière planche l’est tout autant : elle vient renforcer cette symbolique du cinéma. On a l’impression d’avoir suivi toute la vie d’Agni à travers le prisme d’un film. Et quand tout s’arrête, c’est un peu comme à la fin d’une séance : les lumières se rallument, tout le monde se lève, un sourire aux lèvres, encore marqué par ce qu’il vient de vivre.
+![img19](img19.jpg)
 
-# L’humour dans Fire punch
+## L’humour dans Fire punch
 
 Malgré son côté sérieux, Fire Punch sait faire rire avec de l’humour gras, notamment grâce à Togata et son comportement obscène. Son humour colle plutôt bien à celui du tonton beauf un peu misogyne. Qui plus est, mentalement Togata se considère comme un homme, ce qui colle aussi bien mieux à cette image qu'à son apparence physique.
 
 Dans l'œuvre, l’humour nous est plus familier étant donné qu’il fait plus occidental (comme beaucoup des influences de Fujimoto, notamment concernant le cinéma). Et ça fait du bien car j’ai un peu de mal avec l’humour japonais.
+![img20](img20.jpg)
+![img21](img21.jpg)
 
-# Conclusion
+## Conclusion
 
 Pour conclure cette analyse, j’ai franchement beaucoup aimé Fire Punch et son rapport à la religion, les personnages de Fujimoto paraissent très humains de par leurs imperfections et ça fait du bien. En ce qui me concerne, je pense avoir fait le tour de ce qui m’intéressait vraiment chez Fujimoto. J’ai pu m’attarder récemment sur Naoki Urasawa, l’auteur de Pluto, Monster ou encore 20th Century Boys. Une de ces œuvres sera peut-être sujette à une prochaine analyse. Qui sait ?
 

src/content/blog/analyse-de-p3r-episode-aegis.md

@@ -1,169 +0,0 @@
----
-title: "Analyse de P3R - Épisode Aigis"
-pubDate: 2024-10-21
-description: "Dans ce post j'analyse Persona 3 Reload - Épisode Aigis, on a plutôt une analyse de la philosophie ainsi que la mentalité des personnages ici. Disclaimer : JE SPOIL ABSOLUMENT TOUT LE DLC"
-author: "Guams"
-illustration: "image.png"
-tags: ["Jeux vidéos"]
----
-
-# Introduction
-
-Dans ce post, je propose une analyse du tout nouveau (plus tant que ça) Persona 3 reload épisode aigis, un DLC qui vient en complément du jeu original et apporte une suite à l’histoire. Je tiens à préciser que je ne parle d’absolument aucun élément de gameplay ici, je ne trouve pas ça pertinent contrairement à l’histoire qui, elle est très symbolique et pleine de messages.
-
-Premièrement, un peu de mise en contexte :
-
-Après que makoto ait passé l’arme à gauche on constate un impact évident sur le moral de ses camarades, surtout sur Aegis qui, elle, découvre en elle une certaine vacuité et exprime son souhait à Mitsuru de retourner au laboratoire afin de concrètement mettre fin à ses jours aussi (C’est comme ça que je l’ai interprété en tout cas). On a ici une Aegis vraiment pas au top de sa forme… Tous les membres de la SEES cherchent à tout de même honorer la disparition de Makoto qui (on le rappelle) a fait disparaître Tartare. Pendant la soirée, à la télévision, la présentatrice entame le compte à rebours vers minuit, la date est censée passer du 31/03 au 01/04. Le décompte passé, la même présentatrice annonce les informations du 31 mars et la date n’a toujours pas changé non plus… Il s’avère qu’ils sont coincés dans une boucle temporelle. La nuit suivante, une machine semblant être comme Aegis s'appelant Métis fait son entrée, malmène toute la SEES en disant vouloir protéger Aegis. Celle-ci voulant protéger ses amis se bat contre Métis mais sans succès, c’est alors qu’elle perdit et Métis continua à violenter les coéquipiers de notre robot préféré sous ses yeux, sans qu’elle ne puisse rien y faire. C’est là que Aegis éveille sa toute nouvelle persona Orphée (la même persona que Makoto !). On a ensuite une ellipse de trois jours, puis c’est le début du jeu.
-
-Voici ma remise en contexte non exhaustive, la fin est un peu brutale car je préfère garder l’aspect philosophique pour plus tard. À présent, je vais aborder l’état psychologique de Aegis qu’on peut voir très affaiblie tout au long de l’histoire.
-
-# L’état mental de Aigis
-
-Comme dit plus haut, on a dès le début de l'œuvre une Aigis remplie d’incertitude quant à sa raison d'être. Manquant de volonté de vivre, elle a demandé à Mitsuru si cela était possible de la ramener au labo, c’est un peu une manière de mettre fin à ses jours. On peut d’ailleurs comprendre un peu mieux sa tristesse avec l’OST “Disconected”, voici deux paragraphes provenant de celle-ci :
-
-<br>
-
-<u>Paragraphe n°1</u>
-
-_"Feeling empty_
-
-_Spending days and nights of silence_
-
-_'Cause no words can explain how I feel_
-
-_In my mind, and heart_
-
-_Oh, I don't know what I am but I miss myself_
-
-_'Cause she's not here anymore_
-
-_How can I move on? Please tell me"_
-
-<br>
-
-<u>Paragraphe n°2</u>
-
-_"It feels like my heart is suffocating_
-
-_How do you make amends when you're gone from me?_
-
-_Even though with a win_
-
-_How come I feel so lost?_
-
-_Nothing makes sense to me_
-
-_I'm so numb, so lost without you"_
-
-<br>
-
-Dans cette OST Aigis parle à la première personne, on voit ici une certaine détresse quant à son état mental. On peut considérer ça comme une sérieuse dépression, elle ne dort plus, le cœur serré, plus rien n’a de sens sans Makoto. Il y a aussi deux vers très intéressants dans le paragraphe n°1 sont :
-
-<br>
-
-"_Oh, I don't know what I am but I miss myself_
-
-_'Cause she's not here anymore”_
-
-<br>
-
-Ici Aigis fait directement référence à Métis qui est en réalité partie intégrante d’elle, mais par manque de volonté elle s’est elle-même dénigrée (ce qui a mené à l’arrêt du temps). Métis qui représente son humanité et sa volonté de vivre, c'est aussi pour ça que quand Aigis refuse de vivre Métis s’est mise à pleurer, car elle refuse que Aigis meure, cela voudrait dire qu’elle se retrouverait à nouveau seule.
-
-Maintenant que l’état psychologique de Aegis a été approfondi, je vais parler du contexte de la boucle temporelle symbolisé dans ce DLC par un désert de porte. Pourquoi des portes? À quoi cela fait référence?
-
-# Le désert de porte
-
-On a donc une boucle temporelle avec les membres de la SEES qui sont coincés dans le dortoir avec comme seul accès externe un sous-sol qui s’est formé avec l’avènement de Métis, celui-ci donne accès sur un désert de porte (littéralement). Chaque porte donne accès au passé d’un membre de la SEES, le fil directeur du jeu est pour chacun des membres de l’équipe de faire face à son passé. Donc de faire face à des moments difficiles que chacun a vécus. Le désert de porte pourrait potentiellement représenter l’infinité de la mémoire, du fait que les portes les plus isolées sont les souvenirs douloureux les plus enfouis dans notre mémoire, ce serait aussi pourquoi chaque porte ouverte par les membres de l’équipe représente un réel traumatisme ou une référence à leurs traumatismes (puisque ce sont les plus évidentes). Ce sont des émotions très fortes qui sont ressenties dans ces souvenirs, ce qui vient marquer l’importance de ceux-ci. Je tiens à ajouter que ces souvenirs font référence à des événements majeurs de leur vie, ce qui a en partie contribué à forger qui ils sont aujourd’hui. On peut citer comme exemple le manque évident du père de Yukari, on peut clairement parler d’une obsession, de comprendre ce qui a pu arriver à son père. Peut-être espère-t-elle le retrouver au fond (foreshadowing? :D).
-
-Une fois arrivé au dernier souvenir, on voit un souvenir appartenant à Aegis, en fait c’est un rêve qu’elle faisait souvent après la mort de Makoto, ce qui appuie son traumatisme une fois de plus.
-
-À la fin de la scène on il y a un gros flash blanc et la silhouette de Métis émergeant de l’ombre de Aegis, c’est là qu’on peut supposer que Métis est née ! Tout ça après que Aegis ait prononcé ces mots : “If this is what it’s like now… then I… I wish I could just be a simple machine again…” donc une perte de sa raison d’être.
-
-Ensuite je vais parler des différentes batailles d’idéaux, dans cette partie il y a des différences d’interprétation entre les membres de l’équipe qui se concluent en confrontation, c’est un point vraiment intéressant pour mieux comprendre la philosophie ou les principes de chaque personnage.
-
-# Une bataille d’idéaux
-
-Une fois toutes les portes ouvertes Métis révèle que la solution pour sortir de cette boucle temporelle, il faut forger la clé et chacun des membres de la SEES en possède une partie. Cette clé servira soit à revenir au présent, soit à revenir dans le passé et pour la forger, il faut soit un accord collectif soit une soumission de l’autre à notre idée par un combat. On a alors plusieurs camps qui se forment :
-
-- Aegis
-- Métis
-- Fuuka
-
-Le second :
-
-- Amada
-- Sanada
-
-Le troisième :
-
-- Junpei
-- Koromaru
-
-Le dernier :
-
-- Mitsuru
-- Yukari
-
-<br>
-
-Dans le premier camp c’est l’équipe des indécis, Aegis par manque de volonté, Métis pour protéger Aegis et Fuuka uniquement pas indécision.
-
-Dans le second, on retrouve Amada et Sanada qui veulent revenir dans le présent par respect envers le sacrifice de Makoto.
-
-Le troisième groupe qui ne veut pas revenir dans le passé par peur qu’en réparant les erreurs du passé actuel cela crée d’autres erreurs avec conséquences potentiellement plus grosses.
-
-Le dernier qui veut retourner dans le passé pour réparer leurs erreurs.
-
-On a donc deux idées qui se confrontent ici (sans compter les indécis), de l’un une vision stoïque et de l’autre du déni. Ceux qui veulent retourner dans le présent aborde une vision des choses plus rationnelle et en rapport avec le stoïcisme, comme quoi nous ne devons pas être affecté par des événements passés, que nous ne pouvons pas changer et que nous devons vivre avec, s’accepter comme on est pour être en paix avec soi. De l'autre des personnes qui agissent sous le coup de l’émotion et persuadées que revenir dans le temps pourrait corriger leurs erreurs passées, d’ailleurs Junpei soulève une question très intéressante avant de combattre.
-
-Yukari n’arrive visiblement pas à accepter sa défaite, d’ailleurs, parce qu’après avoir soumis le reste de l'équipe, elle fond en larmes en exprimant à quel point son père lui manque, ce qui appuie l’usure psychologique de certains membres de l’équipe quant à leurs traumatismes. Sans trop de rapport, je trouve important de préciser que dans l’OST “Don’t” la chanteuse nous décrit le point de vue d’un membre de la SEES qui se bat pour sa vision des choses :
-
-<br>
-
-_"Do not make me_
-
-_Already lost my keys_
-
-_To the door wide shut_
-
-_Only have one wish_
-
-_Now it's never gonna come true_
-
-_Trapped in time_
-
-_Forever in remorse_
-
-_How could I ever be_
-
-_In peace when nothing else matters to me”_
-
-<br>
-
-Métis a par la suite convaincu Aegis de continuer de vivre, car Métis est en réalité la partie que Aegis a refusé d’accepter (son humanité, son envie de vivre). Après être redevenue lucide, Aegis a pris la décision de revenir dans le présent, or pour cela il faut franchir une dernière porte…
-
-Derrière cette porte se situe le boss final du DLC, avec toute sa symbolique aussi, cette partie sera expliquée dans la partie suivante.
-
-# La bataille finale
-
-Après que Aegis ait pris la décision de revenir dans le présent, en ayant au préalable convaincu ses coéquipiers par la manière forte. On a une statue de Makoto scellant une porte, c’est vraisemblablement Nyx qui y est scellé.
-
-Et une monstruosité qui essaie de briser le sceau. Pour rappel, Makoto a scellé Nyx (qui représente la mort, la fin du monde) en échange de sa vie à la fin du jeu. Ici on a une métaphore où la monstruosité représente l’accumulation d’émotions humaines négatives, ou, concrètement tout le mal-être humain réuni en une seule entité qui souhaite l’avènement de Nyx.
-
-On a la SEES qui se bat contre cette monstruosité, un travail titanesque car on parle quand même de la représentation de l’accumulation de toutes les émotions humaines négatives et on pourrait imaginer que s' ils n’arrivent pas à la battre, à terme le sceau de Makoto aurait été brisé et plus personne ne serait là pour arrêter Nyx. Dans l'œuvre, la volonté humaine dirige indéniablement vers la fin des temps (on pourrait probablement faire un parallèle avec la vraie vie).
-
-# La philosophie derrière la fin
-
-Dans cette section, je ne fais que supposer, je ne suis pas philosophe.
-
-On a du côté de la SEES une vision plutôt volontariste (celà est valable tout du long de persona 3), où chacun cherche à forger l’avenir par la seule force de sa volonté. Tandis que de l’autre côté on aurait plus une vision fataliste motivée par le pessimisme des pensées sombres qui composent cette créature. Elle symbolise les sentiments humains négatifs et a pour seule volonté la libération de Nyx. Le désespoir mène à s’enfoncer dans le malheur et chercher du réconfort dans celui-ci . Il est généralement plus simple de remettre la faute sur une cause externe possiblement inexistante ou, du moins, incertaine (exemple : le destin). La morale apporte une vision qui vise à être en paix avec ce que l’on est et dans le fait d’avancer dans la vie et de chercher à remédier clairement à nos problèmes que de les fuir et de se conforter dans une “réalité alternative” créée par notre cerveau pour “supporter” le malheur (alors qu’en réalité, il ne fait que nous conforter dans celui-ci).
-
-Maintenant que je vous ai assommé avec toute cette philosophie, passons à la conclusion !
-
-# Conclusion
-
-Pour conclure ce DLC je trouve ce DLC vraiment intéressant vu d’un aspect réflexion, philosophie, sa morale est réussie et l’ensemble du DLC véhicule des messages importants et encourageants.
-
-Pour apporter un aspect plus personnel, je trouve que le DLC est réellement bien structuré dans son histoire, sa symbolique et les messages qu’il transmet au joueur, mais en ce qui concerne l’aspect gameplay, il s’agit plus d’un recyclage…
-
-En tout cas, voici ma première analyse, si vous avez des retours à me faire, n’hésitez pas, je suis ouvert à toute critique. Merci d’avoir lu. :)

src/content/blog/fonctionnement-de-la-nouvelle-architecture-du-blog/index.md

@@ -0,0 +1,78 @@
+---
+title: "Fonctionnement de la nouvelle architecture du blog (pour les nerds)"
+pubDate: 2026-09-12
+description: "Je vais vous décrire pourquoi j'ai refait de A à Z mon site de blog et expliquer techniquement le fonctionnement du nouveau et de l'ancien, appuyé par des schémas. Pour mes nerds :)"
+author: "Guams"
+illustration: "illu.jpg"
+tags: ["Dev"]
+---
+
+## Introduction
+
+Ça fait un bail que je n'ai pas sorti de post sur ce blog ! Je n'étais vraiment pas satisfait du rendu que ça donnait  
+![ancien_look](ancien_look.webp)
+Je trouve le style super générique, sans âme et plein d'autres raisons m'ont un peu forcé la main pour changer complètement l'archi et le style.
+![nouveau_look](nouveau_look.png)
+J'ai opté pour une DA SIGNALIS, un jeu indé vraiment cool que j'ai pu jouer au début d'année !
+
+## Les problèmes structurels de l'ancien blog
+
+Pour un peu de mise en contexte : l'ancien site fonctionnait sur une stack Angular + SpringBoot + Postgres avec Angular pour frontend en CSR (Client-Side Rendering) qui communique avec un backend Spring qui interagit lui avec la base de données Postgres. Donc en résumé une simple SPA (Single Page Application)
+![schéma_SPA](schema_spa.png)
+
+### Le CSR, un problème pour le référencement
+
+Le CSR est primordial pour le fonctionnement d'une SPA, ça permet de générer une page web dynamiquement grâce au navigateur du client mais étant donné que le contenu des pages n'existe pas réellement sans envoyer de requête au back alors les robots google n'ont pas tout le contenu du site pour pouvoir bien le référencer.
+
+### Un problème fondamental de conception
+
+J'ai par flemme conçu mon système pour encoder chacune des images sur les blogs en base64
+. Comme ça au lieu de les stocker sous forme de fichier statique sur le back, je peux les stocker directement en base de données. Problème : une image encodée en base64 est approximativement 33% à 37% plus lourde, donc sur un blog qui contient 23 images (ce qui est le cas de [l'analyse de fire punch](https://kolibri.guams.fr/posts/analyse-de-fire-punch)) donc en cumulant la taille de chaque image ça devient TRES LOURD.
+
+### Un problème de performance
+
+En rapport avec le précédent point, voici qui héberge TOUS mes sites :
+![rpi](rpi.png)
+C'est un Raspberry pi 5 donc le principe de devoir faire une requête lourde de potentiellement quelques dizaines de Mo peut le faire un peu galérer (en fonction de l'internet on peut attendre de 5 secondes à 30 secondes rien que pour récupérer les blogs...).
+
+### Une qualité de code plutôt mauvaise
+
+Angular était mon premier framework web que j'ai appris à utiliser. Et avec du recul, Angular est un assez mauvais choix car en plus d'être lourd et plutôt pas performant, il est difficile à réellement prendre en main (mon ancien blog était en angular 18 mais le framework a beaucoup changé depuis).
+
+SpringBoot de son côté est un super framework pour des API web mais est super complexe à prendre en main (j'ai été formé 1 an à l'utiliser et je ne comprends pas encore réellement son fonctionnement !).
+
+## Le nouveau fonctionnement du blog
+
+Ce nouveau blog est développé en Astro, un framework web plutôt léger qui permet notamment l'interprétation de fichier markdown en page HTML.
+
+L'architecture de l'appli ressemble à ça :
+![headless_cms_schema](headless_cms.png)
+
+Ça ressemble assez vite fait à un headless CMS car le fonctionnement est globalement pareil mais ce n'en est pas vraiment un. Pour expliquer plus en détail le schéma :
+
+- Depuis Gitea j'upload des fichiers markdown qui correspondent aux posts
+- Gitea exécute un runner qui va s'occuper de build la nouvelle image docker
+- Le runner sert un site web 100% statique
+
+L'intérêt principal c'est les temps de chargement instantanés.
+
+J'en ai profité pour créer un compte qui s'occupe de commit les blogs aussi, puisque le blog est en rapport avec SIGNALIS
+![who_is_bro](who_is_bro.png)
+
+## Les avantages / inconvénients de cette solution
+
+- \+ Aucun temps de chargement
+- \+ Maintient plus facile (pas de back à maintenir, juste un front)
+- \+ Une interprétation native du markdown grâce à Astro
+
+* \- Dépend de Gitea
+* \- Le temps de build est très long (surtout sur un RPI)
+  ![build_time](build_time.png)
+
+## Conclusion
+
+J'ai fait une refonte complète de mon ancien blog avec un style plutôt original, une architecture entièrement différente et j'ai pu expérimenter ma première mise en place de CI/CD.
+
+Je compte faire quelques améliorations concernant le style ou le fonctionnement du site. La version actuellement existante n'est pas finale. J'espère que ma petite tirade aura intéressé quelques nerds... Si vous avez des questions concernant les détails du site, vous pouvez aller lire le code sur gitea (pas encore documenté D:) ou bien m'envoyer un message sur insta ou autre.
+
+Je vais faire de mon mieux pour rester actif en tout cas !

src/layouts/Layout.astro

@@ -9,9 +9,18 @@ import Footer from "../components/Footer.astro";
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <meta content="KLBR" property="og:title" />
+    <meta
+      content="Kolibri (KLBR) is a SIGNALIS themed blog"
+      property="og:description"
+    />
+    <meta content="https://kolibri.guams.fr" property="og:url" />
+    <meta content="https://kolibri.guams.fr/logo.png" property="og:image" />
+    <meta content="#0099ff" data-react-helmet="true" name="theme-color" />
+    <link rel="icon" type="image/png+xml" href="/logo.png" />
     <meta name="generator" content="{Astro.generator}" />
     <Font cssVariable="--font-atkinson" />
-    <title>Astro Basics</title>
+    <title>KLBR - Blog</title>
   </head>
   <body>
     <main>

src/pages/index.astro

@@ -11,4 +11,28 @@ const posts = (await getCollection("blog")).sort(
 
 <Layout>
   {posts.map((post) => <PostCard id={post.id} title={post.data.title}, description={post.data.description} pubDate={post.data.pubDate} updatedDate={post.data.updatedDate} illustration={post.data.illustration} />)}
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const searchBar = document.getElementById('searchBar') as HTMLInputElement | null;
+      
+      const posts = document.querySelectorAll('article'); 
+
+      if (searchBar) {
+        searchBar.addEventListener('input', (e) => {
+          const target = e.target as HTMLInputElement;
+          const term = target.value.toLowerCase();
+
+          posts.forEach((post) => {
+            const text = post.textContent?.toLowerCase() || '';
+            
+            if (text.includes(term)) {
+              (post as HTMLElement).style.display = ''; 
+            } else {
+              (post as HTMLElement).style.display = 'none'; 
+            }
+          });
+        });
+      }
+    });
+  </script>
 </Layout>

src/pages/post-create.astro

@@ -1,154 +0,0 @@
----
-import { postService } from "../api/axios";
-import Layout from "../layouts/Layout.astro";
-import { PostOut } from "../models/post";
-import "../styles/post-create.css";
-
-export const prerender = false;
-
-if (Astro.request.method === "POST") {
-  try {
-    const data = await Astro.request.formData();
-
-    const postToSend: PostOut = new PostOut();
-
-    const mdFile = data.get("markdownInput");
-    const illustration = data.get("illustrationInput");
-    const documentImages = data
-      .getAll("documentImagesInput")
-      .filter((entry) => entry instanceof File);
-
-    if (illustration instanceof File && illustration.size > 0) {
-      await postService.sendIllustration(illustration).then((res) => {
-        postToSend.illustration_image = res.data;
-      });
-    }
-
-    await postService.sendDocumentImages(documentImages).then((res) => {
-      postToSend.document_images = new Map(Object.entries(res.data));
-    });
-
-    if (mdFile instanceof File) {
-      await mdFile.text().then((txt) => (postToSend.content = txt));
-      await postService
-        .sendPost(postToSend)
-        .then((res) => console.log(res.data));
-    }
-  } catch (error) {
-    if (error instanceof Error) {
-      console.error(error.message);
-    }
-  }
-}
----
-
-<Layout>
-  <form method="POST" enctype="multipart/form-data">
-    <u>Consigne</u>
-    <p>le markdown doit contenir cette entête :</p>
-    <pre>
----
-<span class="green">title</span>: <span class="blue">"titre"</span>
-<span class="green">pubDate</span>: <span class="blue">YYYY-MM-DD</span>
-<span class="green">description</span>: <span class="blue">'description du post'</span>
-<span class="green">author</span>: <span class="blue">"author"</span>
-<span class="green">illustration</span>: <span class="blue">"image.png"</span>
-<span class="green">tags</span>: [<span class="blue">"Manga"</span>, <span class="blue">"Anime"</span>]
----
-    </pre>
-
-    <label for="markdownInput">
-      <span id="mdMessage">Ajouter un fichier markdown</span>
-      <span id="mdFilename"></span>
-    </label>
-    <input
-      id="markdownInput"
-      type="file"
-      name="markdownInput"
-      accept=".md"
-      required
-    />
-
-    <label for="illustrationInput" id="illustrationLabel">
-      Ajouter l'image d'illustration du document
-    </label>
-    <input
-      id="illustrationInput"
-      type="file"
-      name="illustrationInput"
-      accept="image/*"
-      required
-    />
-
-    <label for="documentImagesInput" id="documentImagesLabel">
-      Ajouter les images du document
-    </label>
-    <input
-      id="documentImagesInput"
-      type="file"
-      name="documentImagesInput"
-      accept="image/*"
-      multiple
-      required
-    />
-
-    <button type="submit">Créer le post</button>
-  </form>
-</Layout>
-
-<script>
-  const mdInput = document.querySelector<HTMLInputElement>("#markdownInput");
-  const mdMessage = document.querySelector<HTMLElement>("#mdMessage");
-  const mdFilename = document.querySelector<HTMLElement>("#mdFilename");
-
-  mdInput?.addEventListener("change", (event) => {
-    const target = event.target as HTMLInputElement;
-    const file = target.files?.[0];
-
-    if (file && mdMessage && mdFilename) {
-      mdMessage.style.display = "none";
-      mdFilename.textContent = file.name;
-    } else if (mdMessage && mdFilename) {
-      mdMessage.style.display = "inline";
-      mdFilename.textContent = "";
-    }
-  });
-
-  const illustrationInput =
-    document.querySelector<HTMLInputElement>("#illustrationInput");
-  const illustrationLabel =
-    document.querySelector<HTMLElement>("#illustrationLabel");
-
-  illustrationInput?.addEventListener("change", (event) => {
-    const target = event.target as HTMLInputElement;
-    const file = target.files?.[0];
-
-    if (illustrationLabel) {
-      illustrationLabel.textContent = file
-        ? file.name
-        : "Ajouter l'image d'illustration du document";
-    }
-  });
-
-  const documentImagesInput = document.querySelector<HTMLInputElement>(
-    "#documentImagesInput",
-  );
-  const documentImagesLabel = document.querySelector<HTMLElement>(
-    "#documentImagesLabel",
-  );
-
-  documentImagesInput?.addEventListener("change", (event) => {
-    const target = event.target as HTMLInputElement;
-    const files = target.files;
-
-    if (documentImagesLabel && files) {
-      if (files.length === 1) {
-        documentImagesLabel.textContent = files[0].name;
-      } else if (files.length > 1) {
-        documentImagesLabel.textContent = `${files.length} images sélectionnées`;
-      } else {
-        documentImagesLabel.textContent = "Ajouter les images du document";
-      }
-    }
-  });
-</script>

src/pages/posts/[post_id].astro

@@ -17,15 +17,17 @@ const { Content } = await render(post);
 ---
 
 <Layout>
-  <main>
+  <div class="post-div">
-    <div>
+    <article class="post-container">
+      <hgroup class="post-header">
         <h1>{post.data.title}</h1>
         <h2>{post.data.tags}</h2>
-      <img
+        <img src={post.data.illustration?.src} alt="" />
-        src={post.data.illustration?.src}
+      </hgroup>
-        alt={post.data?.illustration?.src}
+
-      />
+      <div class="post-content">
-    </div>
         <Content />
-  </main>
+      </div>
+    </article>
+  </div>
 </Layout>

src/styles/footer.css

@@ -17,5 +17,6 @@ footer {
 
   > p > a {
     font-weight: bold;
+    text-decoration: underline;
   }
 }

src/styles/global.css

@@ -2,7 +2,7 @@
   --primary-light-background-color: #e8f6ff;
   --secondary-light-background-color: #a0d9ff;
   --tertiary-light-background-color: #0099ff;
-  --font-light-hover: #a0d9ff;
+  --font-light-hover: #14527b;
   --primary-font-light-color: black;
   --secondary-font-light-color: #003e68;
   --primary-light-border-color: #0099ff;
@@ -11,7 +11,7 @@
   --primary-dark-background-color: #e8f6ff;
   --secondary-dark-background-color: #a0d9ff;
   --tertiary-dark-background-color: #0099ff;
-  --font-dark-hover: #a0d9ff;
+  --font-dark-hover: #14527b;
   --primary-font-dark-color: black;
   --secondary-font-dark-color: #003e68;
   --primary-dark-border-color: #0099ff;

src/styles/navbar.css

@@ -2,17 +2,19 @@
 
 header {
   align-self: stretch;
-  padding: 2rem;
+  padding: 2rem 0;
   display: flex;
+  width: 100%;
   gap: 2rem;
   flex-direction: column;
 
   > nav {
-    width: 100%;
+    gap: 2rem;
+    padding: 0 2rem;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     justify-content: space-between;
-    align-items: center;
+    align-items: stretch;
 
     > ul {
       color: light-dark(
@@ -33,7 +35,7 @@ header {
       justify-content: space-between;
       align-items: center;
 
-      > section {
+      > div {
         display: flex;
         flex-direction: row;
         gap: 1rem;
@@ -126,7 +128,6 @@ header {
     white-space: nowrap;
     padding: 1rem;
     margin: 15px 0;
-    border-radius: 20px;
     > span {
       color: var(--secondary-font-dark-color);
       display: inline-block;
@@ -147,12 +148,7 @@ header {
 
 @media screen and (max-width: 1600px) {
   header {
-    > nav {
+    gap: 0;
-      flex-direction: column;
-      justify-content: space-between;
-      align-items: stretch;
-      gap: 2rem;
-    }
   }
 }
 
@@ -184,7 +180,7 @@ header {
     > nav {
       > ul {
         border-radius: 16px;
-        > section {
+        > div {
           > input[type="text"] {
             border-radius: 8px;
           }

src/styles/post.css

@@ -1,42 +1,99 @@
 @import "../styles/global.css";
 
-main {
+div.post-div {
-  padding: 2rem;
+  padding: 2rem 1rem;
-
+  display: flex;
-  > div {
+  justify-content: center;
-    text-align: center;
-
-    > h1 {
-      font-size: 56px;
-      font-weight: 400;
 }
-    > h2 {
+
+.post-container {
+  width: 100%;
+  max-width: 800px;
+  background-color: var(--primary-light-background-color);
+  padding: 2.5rem;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.post-header {
+  text-align: center;
+  margin-bottom: 3rem;
+
+  & > h1 {
+    font-size: clamp(2rem, 5vw, 3.5rem);
+    line-height: 1.15;
+    font-weight: 500;
+    margin: 0 0 0.5rem;
+  }
+
+  & > h2 {
+    font-size: 1.1rem;
     font-weight: 400;
     font-style: italic;
+    margin: 0 0 2rem;
+    color: #555;
   }
 
-    > img {
+  & > img {
-      object-fit: cover;
+    display: block;
-      border-radius: 8px;
     width: 100%;
     height: 24rem;
-      margin: 4rem 0;
+    object-fit: cover;
+    border-radius: 8px;
+    margin: 0 auto;
   }
 }
 
-  > h1 {
+.post-content {
-    font-size: 56px;
+  font-size: 1.15rem;
-    font-weight: 400;
+  line-height: 1.7;
+  color: #222;
+
+  & h1,
+  & h2,
+  & h3 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.25;
   }
-  > p {
+
-    font-size: 19px;
+  & p {
-    word-break: break-word;
+    margin-bottom: 1.5rem;
     text-align: justify;
     text-justify: inter-word;
+    word-break: break-word;
+  }
 
-    > img {
+  & a {
+    color: var(--primary-font-light-color);
+    text-decoration: underline;
+    font-weight: bold;
+
+    &:hover {
+      color: var(--font-light-hover);
+      transition: 0.2s;
+    }
+  }
+
+  & img {
     display: block;
-      margin: 1rem auto;
+    max-width: 100%;
+    height: auto;
+    margin: 1.5rem auto;
+    border-radius: 6px;
   }
 }
+
+@media screen and (max-width: 768px) {
+  .post-container {
+    padding: 1.25rem;
+  }
+
+  .post-header > img {
+    height: 16rem;
+  }
+
+  .post-content {
+    font-size: 1rem;
+  }
 }

src/styles/postcard.css

@@ -1,4 +1,6 @@
 article {
+  position: relative;
+
   background-color: light-dark(
     var(--secondary-light-background-color),
     var(--secondary-dark-background-color)
@@ -6,7 +8,7 @@ article {
   width: 60%;
   border-radius: 8px;
   padding: 2rem;
-  margin: 4rem 0 4rem;
+  margin: 4rem 0;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -14,6 +16,16 @@ article {
   box-shadow:
     0 4px 8px 0 rgba(0, 0, 0, 0.2),
     0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow:
+      0 8px 16px 0 rgba(0, 0, 0, 0.2),
+      0 12px 24px 0 rgba(0, 0, 0, 0.19);
+  }
 
   > img {
     object-fit: cover;
@@ -22,7 +34,24 @@ article {
     height: 16rem;
   }
 
-  > span {
+  > h2 {
+    margin: 0.7rem 0 0.7rem 0;
+    text-align: center;
+
+    > a {
+      text-decoration: none;
+      color: inherit;
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+      }
+    }
+  }
+
+  > p {
     font-style: italic;
   }
 }