diff --git a/README.md b/README.md
index 624058c..5211172 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,14 @@
 Git project for my website, it's free and public.
 So you are free to take inspiration from it or steal things from it~
 
+Start the project :
+```
+git pull ......
+cd VixenchromaWebSite
+# You need to have git-lfs installed
+git lfs pull
+docker compose up -d
+# enjoy the website at localhost:8080
+```
+
 LINE / Alyx
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
index 511a7ae..c0743f6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,4 +7,5 @@ services:
 #      - 127.0.0.1:8080:80
       - 8080:80
     volumes:
-      - ./html:/usr/share/nginx/html
\ No newline at end of file
+      - ./html:/usr/share/nginx/html
+      - ./nginx_default.conf:/etc/nginx/conf.d/default.conf:ro
\ No newline at end of file
diff --git a/html/3dprinting_painting.html b/html/3dprinting_painting.html
index 91be757..496b653 100644
--- a/html/3dprinting_painting.html
+++ b/html/3dprinting_painting.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
                         </ul>
                     </div>
                 </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div>
                     <h3>Cool badge !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -64,160 +69,10 @@
             </main>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
     <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        pre {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
+        main img {
+            max-width: 100%;
+            height: auto;
         }
     </style>
     </body>
diff --git a/html/404.html b/html/404.html
new file mode 100644
index 0000000..864e3dd
--- /dev/null
+++ b/html/404.html
@@ -0,0 +1,45 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="title" content="VixenChroma">
+        <meta name="description" content="VixenChroma - Line / Alyx website" />
+        <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
+
+        <link rel="author" href="https://vixenchroma.com"/>
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
+        <title>Vixenchroma</title>
+    </head>
+    <body>
+        <div id="container">
+            <div id="header"></div>
+            <div id="headerArea">
+                <a href="/" style="color:cyan">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:red">Are you lost ?</a><br>
+                <a href="/" style="color:purple">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:red">Are you lost ?</a><br>
+                <a href="/" style="color:cyan">Are you lost ?</a><br>
+                <a href="/" style="color:red">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:purple">Are you lost ?</a><br>
+                <a href="/" style="color:red">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:purple">Are you lost ?</a><br>
+                <a href="/" style="color:cyan">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:deeppink">Are you lost ?</a><br>
+                <a href="/" style="color:cyan">Are you lost ?</a><br>
+                <a href="/" style="color:purple">Are you lost ?</a><br>
+            </div>
+        </div>
+    <style>
+        a {
+            text-decoration: none;
+            font-size: 30px;
+        }
+    </style>
+    </body>
+</html>
\ No newline at end of file
diff --git a/html/about.html b/html/about.html
index 5a878e3..24b3450 100644
--- a/html/about.html
+++ b/html/about.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
                         </ul>
                     </div>
                 </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div>
                     <h3>Cool badge !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -73,161 +78,5 @@
             </main>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
-    <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        pre {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
-        }
-    </style>
     </body>
 </html>
\ No newline at end of file
diff --git a/html/all_updates.html b/html/all_updates.html
new file mode 100644
index 0000000..d9138a2
--- /dev/null
+++ b/html/all_updates.html
@@ -0,0 +1,104 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="title" content="VixenChroma">
+        <meta name="description" content="VixenChroma - Line / Alyx website" />
+        <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
+
+        <link rel="author" href="https://vixenchroma.com"/>
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
+        <title>Vixenchroma</title>
+    </head>
+    <body>
+    <div id="container">
+        <div id="header"></div>
+        <div id="headerArea">
+            <h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
+        </div>
+        <div id="flex">
+            <aside id="leftSidebar" style="margin-right: 8px;">
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
+                </div>
+                <div>
+                    <h3>Navigation</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="/">Home</a></li>
+                            <br>
+                            <li><a href="/about.html">About</a></li>
+                            <br>
+                            <li><a href="/art.html">Art</a></li>
+                            <br>
+                            <li><a href="/embroidery.html">Embroidery / Patches</a></li>
+                            <br>
+                            <li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
+                            <br>
+                            <li><a href="/other_things.html">Other things</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Cool badge !</h3>
+                    <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
+                    <img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
+                </div>
+            </aside>
+            <main>
+                <p>--------</p>
+                <span>LATEST : 04/11/25</span>
+                <div class="box">
+                    <p>
+                        - Languages update !!
+                        <br>You can now switch from English to French
+                        <br>I've also started translating into Japanese
+                        <br>
+                        <br>- Better organization of pages and my HTML code
+                    </p>
+                </div>
+                <p>--------</p>
+                <span> 21/05/25</span>
+                <div class="box">
+                    <p>
+                        - I added an about page and several pages to share my projects
+                    </p>
+                </div>
+                <p>--------</p>
+                <span> 20/05/25</span>
+                <div class="box">
+                    <p>
+                        - <img src="/img/webbadge/new.gif" alt="new gif"/> website version with no more js
+                        <br>
+                        - <img src="/img/webbadge/new.gif" alt="new gif"/> content published
+                    </p>
+                </div>
+            </main>
+        </div>
+    </div>
+    <style>
+        span {
+            font-size: 20px;
+        }
+    </style>
+    </body>
+</html>
\ No newline at end of file
diff --git a/html/art.html b/html/art.html
index 88ea89c..12a5d99 100644
--- a/html/art.html
+++ b/html/art.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
                         </ul>
                     </div>
                 </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div>
                     <h3>Cool badge !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -84,166 +89,11 @@
             </main>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
     <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
         main img {
             max-width: 100%;
             height: auto;
         }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        pre {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
-        }
     </style>
     </body>
 </html>
\ No newline at end of file
diff --git a/html/embroidery.html b/html/embroidery.html
index 8f72f87..02d19d4 100644
--- a/html/embroidery.html
+++ b/html/embroidery.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
                         </ul>
                     </div>
                 </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div>
                     <h3>Cool badge !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -80,165 +85,11 @@
             </main>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
     <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
         main img {
             max-width: 100%;
             height: auto;
         }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3 {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
-        }
     </style>
     </body>
 </html>
\ No newline at end of file
diff --git a/html/fr/index.html b/html/fr/index.html
new file mode 100644
index 0000000..46fd7df
--- /dev/null
+++ b/html/fr/index.html
@@ -0,0 +1,138 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="title" content="VixenChroma">
+        <meta name="description" content="VixenChroma - Line / Alyx website" />
+        <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
+
+        <link rel="author" href="https://vixenchroma.com"/>
+        <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
+        <title>Vixenchroma</title>
+    </head>
+    <body>
+    <div id="container">
+        <div id="header"></div>
+        <div id="headerArea">
+            <h2 style="color:white">Site web Vixenchroma - de Line / Alyx</h2>
+        </div>
+        <div id="flex">
+            <aside id="leftSidebar" style="margin-right: 8px;">
+                <h3>Langages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
+                </div>
+                <div>
+                    <h3>Navigation</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="/">Accueil</a></li>
+                            <br>
+                            <li><a href="/about.html">A propos</a></li>
+                            <br>
+                            <li><a href="/art.html">Art</a></li>
+                            <br>
+                            <li><a href="/embroidery.html">Broderie / Patches</a></li>
+                            <br>
+                            <li><a href="/3dprinting_painting.html">Impression 3D, figurines et peinture</a></li>
+                            <br>
+                            <li><a href="/other_things.html">Autre</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Liens</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">Mon Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">Mon Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">Mon Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">Mon Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Magnifiques badges !</h3>
+                    <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
+                    <img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
+                </div>
+            </aside>
+            <main>
+                <h1 style="font-size: 23px">Bienvenue sur Vixenchroma !</h1>
+                <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/> 
+                <p><strong>Informations sur la proprietaire :</strong></p>
+                <p>Je suis Line ou Alyx, une SysOps française avec beaucoup trop de hobbies.</p>
+
+                <p><strong>Projets en cours :</strong></p>
+                <p>- Je travaille sur ce site web</p>
+                <p>- Creation d'un style pixel art cyberpunk cool pour tous mes projets</p>
+                <p>- Peindre des figurines</p>
+                <p>- Ca joue a The Finals et Arc Raiders</p>
+                <p>- J'apprends a lire et ecrire le japonais</p>
+                <p>- Je me remets a la robotique et a la domotique.</p>
+                <p>- J'essaie de dormir davantage.</p>
+                
+                <p><strong>IRL CTF / Conference ou vous avez peut-etre pu me voir :</strong></p>
+                - BreizhCTF 2025<br>
+                - European Cyber Week 2024<br>
+                - Purple Pill Challenge 2024<br>
+                - Le Hack Paris 2024<br>
+                - BreizhCTF 2024<br>
+                - European Cyber Week 2023<br>
+                - Purple Pill Challenge 2023<br>
+                - Le Hack Paris 2023<br>
+                - BreizhCTF 2023<br>
+                <pre style="font-family: 'ADDSBP';">      ------------------------
+      |       WAF      |
+      ------------------------
+                 \/
+             /^u_ /
+    ,___,--~~~~--' /'~
+    `~--~\ )____,)/'
+       (/\\_  (/\\_
+                </pre>
+      
+                <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>  
+            </main>
+            <aside id="rightSidebar" style="margin-left: 8px;"> 
+                <h3>Mises a jour</h3>
+                <div class="box">
+                    <img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
+                    <ul style="padding-left:8px;">
+                        <li>Mise a jour linguistique !
+                        <br>Vous pouvez passer de l'anglais au français
+                        <br>
+                        <br>Et j'ai commence a traduire en japonais</li>
+                        <br>
+                        <li>Meilleure organisation des pages et du code HTML</li>
+                    </ul>
+                    <p>--------</p>
+                    <span> 21/05/25</span>
+                    <ul style="padding-left:8px;">
+                        <li>Ajout d'une page "A propos" et plusieurs pages pour presenter mes projets</li>
+                    </ul>
+                    <p>--------</p>
+                    <a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >Voir l'ensemble des maj</a>
+                </div>
+                <h3>Outils / Liens externes</h3>
+                <div class="box">
+                    <ul style="padding-left:8px;">
+                        <!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
+                        <li><a href="https://sadgrl.online/resources/webdev-links/">Liens utiles pour creer un site web</a></li>
+                        <br>
+                        <li><a href="https://www.dafont.com/addstandardbitmap.font">Police de caracteres utilisee pour le site</a></li>
+                    </ul>
+                </div>
+                <img src="/img/webbadge/coolline.png" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 80%;">
+            </aside>
+        </div>
+    </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/html/index.html b/html/index.html
index 1a7ef88..829882b 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -50,7 +41,21 @@
                     </div>
                 </div>
                 <div>
-                    <h3>Cool badge !</h3>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Cool badges !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
                     <img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
                     <img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
@@ -64,10 +69,16 @@
                 <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/> 
                 <p><strong>Some owner info :</strong></p>
                 <p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
+
                 <p><strong>Ongoing projects :</strong></p>
                 <p>- Working on this website</p>
                 <p>- Creating a cool cyberpunk pixel art style for all my projects</p>
+                <p>- Painting figurines</p>
+                <p>- Playing The Finals and Arc Raiders</p>
+                <p>- Learning to speak and read japanese</p>
+                <p>- Getting back into robotics and home automation</p>
                 <p>- Trying to sleep more</p>
+                
                 <p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
                 - BreizhCTF 2025<br>
                 - European Cyber Week 2024<br>
@@ -91,24 +102,30 @@
                 <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>  
             </main>
             <aside id="rightSidebar" style="margin-left: 8px;"> 
-                <h2>Updates</h2>
+                <h3>Updates</h3>
                 <div class="box">
-                    <img src="/img/webbadge/new.gif" alt="new gif"/><span> 21/05/25</span>
+                    <img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
+                    <ul style="padding-left:8px;">
+                        <li>Languages update !! You can now switch from English to French
+                            <br>
+                            <br>
+                            I've also started translating into Japanese</li>
+                        <br>
+                        <li>Better organization of pages and my HTML code</li>
+                    </ul>
+                    <p>--------</p>
+                    <span> 21/05/25</span>
                     <ul style="padding-left:8px;">
                         <li>I added an about page and several pages to share my projects</li>
                     </ul>
                     <p>--------</p>
-                    <span> 20/05/25</span>
-                    <ul style="padding-left:8px;">
-                        <li>NEW website version with no more js</li>
-                        <br>
-                        <li>NEW content published</li>
-                    </ul>
+                    <a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
                 </div>
                 <h3>External Tools/Links</h3>
                 <div class="box">
                     <ul style="padding-left:8px;">
-                        <li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull links to build website</a></li>
+                        <!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
+                        <li><a href="https://sadgrl.online/resources/webdev-links/">Useful links to build website</a></li>
                         <br>
                         <li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
                     </ul>
@@ -117,161 +134,5 @@
             </aside>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
-    <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        pre {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
-        }
-    </style>
     </body>
 </html>
\ No newline at end of file
diff --git a/html/jp/index.html b/html/jp/index.html
new file mode 100644
index 0000000..d002a4b
--- /dev/null
+++ b/html/jp/index.html
@@ -0,0 +1,138 @@
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="title" content="VixenChroma">
+        <meta name="description" content="VixenChroma - Line / Alyx website" />
+        <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
+
+        <link rel="author" href="https://vixenchroma.com"/>
+        <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
+        <link rel="stylesheet" href="/vixenchroma.css" />
+        <title>Vixenchroma</title>
+    </head>
+    <body>
+    <div id="container">
+        <div id="header"></div>
+        <div id="headerArea">
+            <h2 style="color:white">Vixenchroma WebSite - Owner Line / Alyx</h2>
+        </div>
+        <div id="flex">
+            <aside id="leftSidebar" style="margin-right: 8px;">
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
+                </div>
+                <div>
+                    <h3>Navigation</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="/">Home</a></li>
+                            <br>
+                            <li><a href="/about.html">About</a></li>
+                            <br>
+                            <li><a href="/art.html">Art</a></li>
+                            <br>
+                            <li><a href="/embroidery.html">Embroidery / Patches</a></li>
+                            <br>
+                            <li><a href="/3dprinting_painting.html">3D printing, figurines and painting</a></li>
+                            <br>
+                            <li><a href="/other_things.html">Other things</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3>Cool badges !</h3>
+                    <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
+                    <img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/linux.png" alt="cool linux badge" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/brains.gif" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;">
+                    <img src="/img/webbadge/fox.png" alt="moving fox gif" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
+                </div>
+            </aside>
+            <main>
+                <h1>Welcome on Vixenchroma !</h1>
+                <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/> 
+                <p><strong>Some owner info :</strong></p>
+                <p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
+
+                <p><strong>Ongoing projects :</strong></p>
+                <p>- Working on this website</p>
+                <p>- Creating a cool cyberpunk pixel art style for all my projects</p>
+                <p>- Painting figurines</p>
+                <p>- Playing The Finals and Arc Raiders</p>
+                <p>- Learning to speak and read japanese</p>
+                <p>- Getting back into robotics and home automation</p>
+                <p>- Trying to sleep more</p>
+                
+                <p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
+                - BreizhCTF 2025<br>
+                - European Cyber Week 2024<br>
+                - Purple Pill Challenge 2024<br>
+                - Le Hack Paris 2024<br>
+                - BreizhCTF 2024<br>
+                - European Cyber Week 2023<br>
+                - Purple Pill Challenge 2023<br>
+                - Le Hack Paris 2023<br>
+                - BreizhCTF 2023<br>
+                <pre style="font-family: 'ADDSBP';">      ------------------------
+      |       WAF      |
+      ------------------------
+                 \/
+             /^u_ /
+    ,___,--~~~~--' /'~
+    `~--~\ )____,)/'
+       (/\\_  (/\\_
+                </pre>
+      
+                <img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>  
+            </main>
+            <aside id="rightSidebar" style="margin-left: 8px;"> 
+                <h3>Updates</h3>
+                <div class="box">
+                    <img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
+                    <ul style="padding-left:8px;">
+                        <li>Languages update !! You can now switch from English to French
+                            <br>
+                            <br>
+                            I've also started translating into Japanese</li>
+                        <br>
+                        <li>Better organization of pages and my HTML code</li>
+                    </ul>
+                    <p>--------</p>
+                    <span> 21/05/25</span>
+                    <ul style="padding-left:8px;">
+                        <li>I added an about page and several pages to share my projects</li>
+                    </ul>
+                    <p>--------</p>
+                    <a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
+                </div>
+                <h3>External Tools/Links</h3>
+                <div class="box">
+                    <ul style="padding-left:8px;">
+                        <!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
+                        <li><a href="https://sadgrl.online/resources/webdev-links/">Useful links to build website</a></li>
+                        <br>
+                        <li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
+                    </ul>
+                </div>
+                <img src="/img/webbadge/coolline.png" alt="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 80%;">
+            </aside>
+        </div>
+    </div>
+    </body>
+</html>
\ No newline at end of file
diff --git a/html/other_things.html b/html/other_things.html
index 91be757..128db23 100644
--- a/html/other_things.html
+++ b/html/other_things.html
@@ -1,4 +1,4 @@
-<html>
+<html lang="en">
     <head>
         <meta charset="UTF-8" />
         <meta name="title" content="VixenChroma">
@@ -6,7 +6,8 @@
         <meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
 
         <link rel="author" href="https://vixenchroma.com"/>
-        <link rel="icon" type="image/svg+xml" href="img/favicon.svg">   
+        <link rel="icon" type="image/svg+xml" href="img/favicon.svg"> 
+        <link rel="stylesheet" href="/vixenchroma.css" />
         <title>Vixenchroma</title>
     </head>
     <body>
@@ -17,22 +18,12 @@
         </div>
         <div id="flex">
             <aside id="leftSidebar" style="margin-right: 8px;">
-                <div>
-                    <h3>Links</h3>
-                    <div class="box">
-                        <ul style="padding-left:8px;">
-                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
-                            <br>
-                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
-                            <br>
-                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
-                            <br>
-                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
-                        </ul>
-                    </div>
+                <h3>Languages</h3>
+                <div class="box">
+                    <li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
                 </div>
                 <div>
-                    <h3>Projects</h3>
+                    <h3>Navigation</h3>
                     <div class="box">
                         <ul style="padding-left:8px;">
                             <li><a href="/">Home</a></li>
@@ -49,6 +40,20 @@
                         </ul>
                     </div>
                 </div>
+                <div>
+                    <h3>Links</h3>
+                    <div class="box">
+                        <ul style="padding-left:8px;">
+                            <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
+                            <br>
+                            <li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
+                            <br>
+                            <li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
+                            <br>
+                            <li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
+                        </ul>
+                    </div>
+                </div>
                 <div>
                     <h3>Cool badge !</h3>
                     <img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
@@ -64,160 +69,10 @@
             </main>
         </div>
     </div>
-
-<!-- THIS IS THE CSS !-->
     <style>
-        :root {
-            --header-image: url('/img/LINE_TXT_REVERSE.png');
-            --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
-
-            /* colors */
-            --content: #43256E;
-        }
-
-        @font-face {
-            font-family: ADDSBP;
-            src: url('ADDSBP.TTF');
-        }
-
-        body {
-            cursor: url('img/cursor.png'), auto;
-            font-family: 'ADDSBP';
-            margin: 0;
-            background-color: #08031A;
-            background-size: 960px;
-            color: #fceaff;
-            background-image: var(--body-bg-image);
-        }
-
-        * {
-            box-sizing: border-box;
-        }
-
-        #container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-
-        #headerArea {
-            text-align: center;
-            height: 40px;
-        }
-
-        #container a {
-            color: #1E74FD;
-            font-weight: bold;
-        }
-
-        #header {
-            width: 100%;
-            background-size: 100%;
-            background-color: #241445;
-            height: 400px;
-            background-image: var(--header-image);
-        }
-
-        #flex {
-            display: flex;
-        }
-
-        li a {
-            color: #1E74FD;
-            font-weight: 800;
-            text-decoration: none;
-            cursor: url('img/cursor_click.png'), auto;
-        }
-
-        li a:hover {
-            color: #a49cba;
-            text-decoration: underline;
-        }
-
-        aside {
-            background-color: #241445;
-            width: 200px;
-            padding: 20px;
-            font-size: smaller;
-        }
-
-        main {
-            background-color: #43256E;
-            flex: 1;
-            padding: 20px;
-            order: 2;
-        }
-
-        /* what's this "order" stuff about??
-    allow me to explain!
-    if you're using both sidebars, the "order" value
-    tells the CSS the order in which to display them.
-    left sidebar is 1, content is 2, and right sidebar is 3! */
-
-        */ #leftSidebar {
-            order: 1;
-        }
-
-        #rightSidebar {
-            order: 3;
-        }
-
-        footer {
-            background-color: #13092D;
-            width: 100%;
-            height: 40px;
-            padding: 8px;
-            text-align: center;
-        }
-
-        h1,
-        h2,
-        h3,
-        pre {
-            color: #1E74FD;
-        }
-
-        h1 {
-            font-size: 25px;
-        }
-
-        strong {
-            color: #1E74FD;
-        }
-
-        .box {
-            background-color: #13092D;
-            border: 1px solid #1E74FD;
-            padding: 8px;
-        }
-
-        #topBar {
-            width: 100%;
-            height: 30px;
-            padding: 8px;
-            font-size: smaller;
-            background-color: #13092D;
-        }
-
-        @media only screen and (max-width: 800px) {
-            #flex {
-                flex-wrap: wrap;
-            }
-
-            aside {
-                width: 100%;
-            }
-            
-            main {
-                order: 1;
-            }
-
-            #leftSidebar {
-                order: 2;
-            }
-
-            #rightSidebar {
-                order: 3;
-            }
+        main img {
+            max-width: 100%;
+            height: auto;
         }
     </style>
     </body>
diff --git a/html/vixenchroma.css b/html/vixenchroma.css
new file mode 100644
index 0000000..28215eb
--- /dev/null
+++ b/html/vixenchroma.css
@@ -0,0 +1,156 @@
+:root {
+    --header-image: url('/img/LINE_TXT_REVERSE.png');
+    --body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
+
+    /* colors */
+    --content: #43256E;
+}
+
+@font-face {
+    font-family: ADDSBP;
+    src: url('/ADDSBP.TTF');
+}
+
+body {
+    cursor: url('/img/cursor.png')6 0, auto;
+    font-family: 'ADDSBP';
+    margin: 0;
+    background-color: #08031A;
+    background-size: 960px;
+    color: #fceaff;
+    background-image: var(--body-bg-image);
+}
+
+* {
+    box-sizing: border-box;
+}
+
+#container {
+    max-width: 900px;
+    margin: 0 auto;
+}
+
+#headerArea {
+    text-align: center;
+    height: 40px;
+}
+
+#container a {
+    color: #1E74FD;
+    font-weight: bold;
+}
+
+#header {
+    width: 100%;
+    background-size: 100%;
+    background-color: #241445;
+    height: 400px;
+    background-image: var(--header-image);
+}
+
+#flex {
+    display: flex;
+}
+
+a {
+    text-decoration: none;
+}
+
+li a {
+    color: #1E74FD;
+    font-weight: 800;
+    text-decoration: none;
+    cursor: url('/img/cursor_click.png')6 0, auto;
+}
+
+li a:hover {
+    color: #a49cba;
+    text-decoration: underline;
+}
+
+aside {
+    background-color: #241445;
+    width: 200px;
+    padding: 20px;
+    font-size: smaller;
+}
+
+main {
+    background-color: #43256E;
+    flex: 1;
+    padding: 20px;
+    order: 2;
+}
+
+/* what's this "order" stuff about??
+allow me to explain!
+if you're using both sidebars, the "order" value
+tells the CSS the order in which to display them.
+left sidebar is 1, content is 2, and right sidebar is 3! */
+
+*/ #leftSidebar {
+    order: 1;
+}
+
+#rightSidebar {
+    order: 3;
+}
+
+footer {
+    background-color: #13092D;
+    width: 100%;
+    height: 40px;
+    padding: 8px;
+    text-align: center;
+}
+
+h1,
+h2,
+h3,
+pre {
+    color: #1E74FD;
+}
+
+h1 {
+    font-size: 25px;
+}
+
+strong {
+    color: #1E74FD;
+}
+
+.box {
+    background-color: #13092D;
+    border: 1px solid #1E74FD;
+    padding: 8px;
+}
+
+#topBar {
+    width: 100%;
+    height: 30px;
+    padding: 8px;
+    font-size: smaller;
+    background-color: #13092D;
+}
+
+@media only screen and (max-width: 800px) {
+    #flex {
+        flex-wrap: wrap;
+    }
+
+    aside {
+        width: 100%;
+    }
+    
+    main {
+        order: 1;
+    }
+
+    #leftSidebar {
+        order: 2;
+    }
+
+    #rightSidebar {
+        order: 3;
+    }
+}
\ No newline at end of file
diff --git a/nginx_default.conf b/nginx_default.conf
new file mode 100644
index 0000000..4b19585
--- /dev/null
+++ b/nginx_default.conf
@@ -0,0 +1,23 @@
+server {
+    listen       80;
+    server_name  localhost;
+
+    # site
+    location / {
+        root   /usr/share/nginx/html;
+        index  index.html;
+    }
+
+    # security
+    server_tokens off;
+
+    # error
+    error_page 404 /404.html;
+    location = /404.html {
+        root   /usr/share/nginx/html;
+    }
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+        root   /usr/share/nginx/html;
+    }
+}
\ No newline at end of file
