diff --git a/docker-compose.yml b/docker-compose.yml
index 5d5b31a..511a7ae 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -4,6 +4,7 @@ services:
     container_name: www
     restart: unless-stopped
     ports:
-      - 127.0.0.1:8080:80
+#      - 127.0.0.1:8080:80
+      - 8080:80
     volumes:
       - ./html:/usr/share/nginx/html
\ No newline at end of file
diff --git a/html/ADDSBP.TTF b/html/ADDSBP.TTF
new file mode 100644
index 0000000..45da78b
Binary files /dev/null and b/html/ADDSBP.TTF differ
diff --git a/html/img/LINE_LOGO_BACKGROUND_WEBSITE.png b/html/img/LINE_LOGO_BACKGROUND_WEBSITE.png
new file mode 100644
index 0000000..c24cc19
Binary files /dev/null and b/html/img/LINE_LOGO_BACKGROUND_WEBSITE.png differ
diff --git a/html/img/LINE_TXT_REVERSE.png b/html/img/LINE_TXT_REVERSE.png
new file mode 100644
index 0000000..3cd80f5
Binary files /dev/null and b/html/img/LINE_TXT_REVERSE.png differ
diff --git a/html/img/UnderDestruction.gif b/html/img/UnderDestruction.gif
new file mode 100644
index 0000000..ead73f4
Binary files /dev/null and b/html/img/UnderDestruction.gif differ
diff --git a/html/img/WonderWorld.png b/html/img/WonderWorld.png
new file mode 100644
index 0000000..fd03f53
Binary files /dev/null and b/html/img/WonderWorld.png differ
diff --git a/html/img/webbadge/brains.gif b/html/img/webbadge/brains.gif
new file mode 100644
index 0000000..62d21f7
Binary files /dev/null and b/html/img/webbadge/brains.gif differ
diff --git a/html/img/webbadge/coolline.png b/html/img/webbadge/coolline.png
new file mode 100644
index 0000000..a8242e3
Binary files /dev/null and b/html/img/webbadge/coolline.png differ
diff --git a/html/img/webbadge/fox.png b/html/img/webbadge/fox.png
new file mode 100644
index 0000000..de88688
Binary files /dev/null and b/html/img/webbadge/fox.png differ
diff --git a/html/img/webbadge/linux.png b/html/img/webbadge/linux.png
new file mode 100644
index 0000000..456877f
Binary files /dev/null and b/html/img/webbadge/linux.png differ
diff --git a/html/img/webbadge/traaa.png b/html/img/webbadge/traaa.png
new file mode 100644
index 0000000..610d276
Binary files /dev/null and b/html/img/webbadge/traaa.png differ
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..b72c518
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,269 @@
+<html>
+    <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">
+        <!-- Open Graph -->
+        <meta property="og:title" content="VixenChroma">
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://vixenchroma.com">
+        <meta property="og:description" content="VixenChroma - Line / Alyx website">
+
+        <link rel="author" href="https://vixenchroma.com"/>
+        <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />        
+        <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: 10px;">
+                <div class="box">
+                    <li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</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>
+                </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/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="powered by my brain" style="margin-left: auto;margin-right: auto;display: block;width: 60%;">
+            </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>- 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: 10px;">
+                <h2>Updates</h2>
+                <div class="box">
+                    <p>20/05/2025</p>
+                    <ul style="padding-left:10px;">
+                        <li>NEW website version with no more js</li>
+                        <br>
+                        <li>NEW content published</li>
+                    </ul>
+                </div>
+                <h3>External Tools/Links</h3>
+                <div class="box">
+                    <ul style="padding-left:10px;">
+                        <li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull 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>
+
+<!-- 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 {
+            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);
+        }
+
+        #navbar {
+            height: 40px;
+            background-color: #13092D;
+            width: 100%;
+        }
+
+        #navbar ul {
+            display: flex;
+            padding: 0;
+            margin: 0;
+            list-style-type: none;
+            justify-content: space-evenly;
+        }
+
+        #navbar li {
+            padding-top: 10px;
+        }
+
+        #navbar li a {
+            color: #1E74FD;
+            font-weight: 800;
+            text-decoration: none;
+        }
+
+        #navbar li a:hover {
+            color: #a49cba;
+            text-decoration: underline;
+        }
+
+        #flex {
+            display: flex;
+        }
+
+        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: 10px;
+            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: 10px;
+        }
+
+        #topBar {
+            width: 100%;
+            height: 30px;
+            padding: 10px;
+            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;
+            }
+
+            #navbar ul {
+                flex-wrap: wrap;
+            }
+        }
+    </style>
+    </body>
+</html>
\ No newline at end of file
