v1 website

This commit is contained in:
Alyx LG 2025-05-20 15:50:38 +02:00
parent 647baea6de
commit 7b4ff74c9e
12 changed files with 271 additions and 1 deletions

View File

@ -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

BIN
html/ADDSBP.TTF Normal file

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.4 KiB

BIN
html/img/WonderWorld.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1014 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 103 KiB

BIN
html/img/webbadge/fox.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
html/img/webbadge/linux.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 696 B

BIN
html/img/webbadge/traaa.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 615 B

269
html/index.html Normal file
View 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>