You've already forked VixenchromaWebSite
Languages update and some better organization and optimization
This commit is contained in:
10
README.md
10
README.md
@@ -1,4 +1,14 @@
|
|||||||
Git project for my website, it's free and public.
|
Git project for my website, it's free and public.
|
||||||
So you are free to take inspiration from it or steal things from it~
|
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
|
LINE / Alyx
|
||||||
@@ -7,4 +7,5 @@ services:
|
|||||||
# - 127.0.0.1:8080:80
|
# - 127.0.0.1:8080:80
|
||||||
- 8080:80
|
- 8080:80
|
||||||
volumes:
|
volumes:
|
||||||
- ./html:/usr/share/nginx/html
|
- ./html:/usr/share/nginx/html
|
||||||
|
- ./nginx_default.conf:/etc/nginx/conf.d/default.conf:ro
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -49,6 +40,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Cool badge !</h3>
|
<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/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
@@ -64,160 +69,10 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- THIS IS THE CSS !-->
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
main img {
|
||||||
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
max-width: 100%;
|
||||||
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
height: auto;
|
||||||
|
|
||||||
/* 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>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
45
html/404.html
Normal file
45
html/404.html
Normal file
@@ -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>
|
||||||
193
html/about.html
193
html/about.html
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -49,6 +40,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Cool badge !</h3>
|
<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/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
@@ -73,161 +78,5 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
104
html/all_updates.html
Normal file
104
html/all_updates.html
Normal file
@@ -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>
|
||||||
192
html/art.html
192
html/art.html
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -49,6 +40,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Cool badge !</h3>
|
<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/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
@@ -84,166 +89,11 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- THIS IS THE CSS !-->
|
|
||||||
<style>
|
<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 {
|
main img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
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>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -49,6 +40,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Cool badge !</h3>
|
<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/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
@@ -80,165 +85,11 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- THIS IS THE CSS !-->
|
|
||||||
<style>
|
<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 {
|
main img {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
height: auto;
|
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>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
138
html/fr/index.html
Normal file
138
html/fr/index.html
Normal file
@@ -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>
|
||||||
225
html/index.html
225
html/index.html
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -50,7 +41,21 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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/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/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/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"/>
|
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
||||||
<p><strong>Some owner info :</strong></p>
|
<p><strong>Some owner info :</strong></p>
|
||||||
<p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
|
<p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
|
||||||
|
|
||||||
<p><strong>Ongoing projects :</strong></p>
|
<p><strong>Ongoing projects :</strong></p>
|
||||||
<p>- Working on this website</p>
|
<p>- Working on this website</p>
|
||||||
<p>- Creating a cool cyberpunk pixel art style for all my projects</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>- Trying to sleep more</p>
|
||||||
|
|
||||||
<p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
|
<p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
|
||||||
- BreizhCTF 2025<br>
|
- BreizhCTF 2025<br>
|
||||||
- European Cyber Week 2024<br>
|
- European Cyber Week 2024<br>
|
||||||
@@ -91,24 +102,30 @@
|
|||||||
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
||||||
</main>
|
</main>
|
||||||
<aside id="rightSidebar" style="margin-left: 8px;">
|
<aside id="rightSidebar" style="margin-left: 8px;">
|
||||||
<h2>Updates</h2>
|
<h3>Updates</h3>
|
||||||
<div class="box">
|
<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;">
|
<ul style="padding-left:8px;">
|
||||||
<li>I added an about page and several pages to share my projects</li>
|
<li>I added an about page and several pages to share my projects</li>
|
||||||
</ul>
|
</ul>
|
||||||
<p>--------</p>
|
<p>--------</p>
|
||||||
<span> 20/05/25</span>
|
<a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
|
||||||
<ul style="padding-left:8px;">
|
|
||||||
<li>NEW website version with no more js</li>
|
|
||||||
<br>
|
|
||||||
<li>NEW content published</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<h3>External Tools/Links</h3>
|
<h3>External Tools/Links</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<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>
|
<br>
|
||||||
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
|
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@@ -117,161 +134,5 @@
|
|||||||
</aside>
|
</aside>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
138
html/jp/index.html
Normal file
138
html/jp/index.html
Normal file
@@ -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>
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
<html>
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="title" content="VixenChroma">
|
<meta name="title" content="VixenChroma">
|
||||||
@@ -6,7 +6,8 @@
|
|||||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||||
|
|
||||||
<link rel="author" href="https://vixenchroma.com"/>
|
<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>
|
<title>Vixenchroma</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -17,22 +18,12 @@
|
|||||||
</div>
|
</div>
|
||||||
<div id="flex">
|
<div id="flex">
|
||||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||||
<div>
|
<h3>Languages</h3>
|
||||||
<h3>Links</h3>
|
<div class="box">
|
||||||
<div class="box">
|
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||||
<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>
|
||||||
<div>
|
<div>
|
||||||
<h3>Projects</h3>
|
<h3>Navigation</h3>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<ul style="padding-left:8px;">
|
<ul style="padding-left:8px;">
|
||||||
<li><a href="/">Home</a></li>
|
<li><a href="/">Home</a></li>
|
||||||
@@ -49,6 +40,20 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
<div>
|
||||||
<h3>Cool badge !</h3>
|
<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/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||||
@@ -64,160 +69,10 @@
|
|||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- THIS IS THE CSS !-->
|
|
||||||
<style>
|
<style>
|
||||||
:root {
|
main img {
|
||||||
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
max-width: 100%;
|
||||||
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
height: auto;
|
||||||
|
|
||||||
/* 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>
|
</style>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
156
html/vixenchroma.css
Normal file
156
html/vixenchroma.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
nginx_default.conf
Normal file
23
nginx_default.conf
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user