v1 website
@@ -4,6 +4,7 @@ services:
 | 
				
			|||||||
    container_name: www
 | 
					    container_name: www
 | 
				
			||||||
    restart: unless-stopped
 | 
					    restart: unless-stopped
 | 
				
			||||||
    ports:
 | 
					    ports:
 | 
				
			||||||
      - 127.0.0.1:8080:80
 | 
					#      - 127.0.0.1:8080:80
 | 
				
			||||||
 | 
					      - 8080:80
 | 
				
			||||||
    volumes:
 | 
					    volumes:
 | 
				
			||||||
      - ./html:/usr/share/nginx/html
 | 
					      - ./html:/usr/share/nginx/html
 | 
				
			||||||
							
								
								
									
										
											BIN
										
									
								
								html/ADDSBP.TTF
									
									
									
									
									
										Normal file
									
								
							
							
						
						
							
								
								
									
										
											BIN
										
									
								
								html/img/LINE_LOGO_BACKGROUND_WEBSITE.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 21 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/LINE_TXT_REVERSE.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 18 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/UnderDestruction.gif
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 3.4 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/WonderWorld.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1014 B  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/webbadge/brains.gif
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 2.8 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/webbadge/coolline.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 103 KiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/webbadge/fox.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 1.1 MiB  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/webbadge/linux.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 696 B  | 
							
								
								
									
										
											BIN
										
									
								
								html/img/webbadge/traaa.png
									
									
									
									
									
										Normal file
									
								
							
							
						
						| 
		 After Width: | Height: | Size: 615 B  | 
							
								
								
									
										269
									
								
								html/index.html
									
									
									
									
									
										Normal file
									
								
							
							
						
						@@ -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>
 | 
				
			||||||