You've already forked VixenchromaWebSite
Languages update and some better organization and optimization
This commit is contained in:
225
html/index.html
225
html/index.html
@@ -1,4 +1,4 @@
|
||||
<html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="title" content="VixenChroma">
|
||||
@@ -6,7 +6,8 @@
|
||||
<meta name="keywords" content="alyx le guen, alyx, le guen, line, vixenchroma">
|
||||
|
||||
<link rel="author" href="https://vixenchroma.com"/>
|
||||
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||
<link rel="icon" type="image/svg+xml" href="img/favicon.svg">
|
||||
<link rel="stylesheet" href="/vixenchroma.css" />
|
||||
<title>Vixenchroma</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -17,22 +18,12 @@
|
||||
</div>
|
||||
<div id="flex">
|
||||
<aside id="leftSidebar" style="margin-right: 8px;">
|
||||
<div>
|
||||
<h3>Links</h3>
|
||||
<div class="box">
|
||||
<ul style="padding-left:8px;">
|
||||
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||
<br>
|
||||
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||
<br>
|
||||
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||
<br>
|
||||
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Languages</h3>
|
||||
<div class="box">
|
||||
<li><a href="/">En</a> / <a href="/fr/">Fr</a> / <a href="/jp/">Jp</a></li>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Projects</h3>
|
||||
<h3>Navigation</h3>
|
||||
<div class="box">
|
||||
<ul style="padding-left:8px;">
|
||||
<li><a href="/">Home</a></li>
|
||||
@@ -50,7 +41,21 @@
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Cool badge !</h3>
|
||||
<h3>Links</h3>
|
||||
<div class="box">
|
||||
<ul style="padding-left:8px;">
|
||||
<li><a href="https://wiki.vixenchroma.com/public" target="_blank">My Wiki</a></li>
|
||||
<br>
|
||||
<li><a href="https://git.vixenchroma.com/explore/repos" target="_blank">My Gitea</a></li>
|
||||
<br>
|
||||
<li><a href="https://github.com/Alyx-LeGuen" target="_blank">My Github</a></li>
|
||||
<br>
|
||||
<li><a href="https://www.linkedin.com/in/alyx-le-guen-a17581173" target="_blank">My Linkedin</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h3>Cool badges !</h3>
|
||||
<img src="/img/WonderWorld.png" alt="Such a world of Wonder" style="margin-left: auto;margin-right: auto;display: block;"/>
|
||||
<img src="/img/webbadge/agrou.png" alt="fox say agrou" style="margin-left: auto;margin-right: auto;display: block;">
|
||||
<img src="/img/webbadge/traaa.png" alt="cool trans flag" style="margin-left: auto;margin-right: auto;display: block;">
|
||||
@@ -64,10 +69,16 @@
|
||||
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
||||
<p><strong>Some owner info :</strong></p>
|
||||
<p>I'm Line or Alyx, French SysOps with too many hobbies.</p>
|
||||
|
||||
<p><strong>Ongoing projects :</strong></p>
|
||||
<p>- Working on this website</p>
|
||||
<p>- Creating a cool cyberpunk pixel art style for all my projects</p>
|
||||
<p>- Painting figurines</p>
|
||||
<p>- Playing The Finals and Arc Raiders</p>
|
||||
<p>- Learning to speak and read japanese</p>
|
||||
<p>- Getting back into robotics and home automation</p>
|
||||
<p>- Trying to sleep more</p>
|
||||
|
||||
<p><strong>IRL CTF / Conference where you may have seen me :</strong></p>
|
||||
- BreizhCTF 2025<br>
|
||||
- European Cyber Week 2024<br>
|
||||
@@ -91,24 +102,30 @@
|
||||
<img src="/img/UnderDestruction.gif" alt="UnderDesctruction"/>
|
||||
</main>
|
||||
<aside id="rightSidebar" style="margin-left: 8px;">
|
||||
<h2>Updates</h2>
|
||||
<h3>Updates</h3>
|
||||
<div class="box">
|
||||
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 21/05/25</span>
|
||||
<img src="/img/webbadge/new.gif" alt="new gif"/><span> 04/11/25</span>
|
||||
<ul style="padding-left:8px;">
|
||||
<li>Languages update !! You can now switch from English to French
|
||||
<br>
|
||||
<br>
|
||||
I've also started translating into Japanese</li>
|
||||
<br>
|
||||
<li>Better organization of pages and my HTML code</li>
|
||||
</ul>
|
||||
<p>--------</p>
|
||||
<span> 21/05/25</span>
|
||||
<ul style="padding-left:8px;">
|
||||
<li>I added an about page and several pages to share my projects</li>
|
||||
</ul>
|
||||
<p>--------</p>
|
||||
<span> 20/05/25</span>
|
||||
<ul style="padding-left:8px;">
|
||||
<li>NEW website version with no more js</li>
|
||||
<br>
|
||||
<li>NEW content published</li>
|
||||
</ul>
|
||||
<a style="color:deeppink; font-size: 18px;" href="/all_updates.html" >View past updates</a>
|
||||
</div>
|
||||
<h3>External Tools/Links</h3>
|
||||
<div class="box">
|
||||
<ul style="padding-left:8px;">
|
||||
<li><a href="https://goblin-heart.net/sadgrl/webmastery/webmaster-links">Usefull links to build website</a></li>
|
||||
<!-- Old https://goblin-heart.net/sadgrl/webmastery/webmaster-links sadgrl website -->
|
||||
<li><a href="https://sadgrl.online/resources/webdev-links/">Useful links to build website</a></li>
|
||||
<br>
|
||||
<li><a href="https://www.dafont.com/addstandardbitmap.font">Font used for the site</a></li>
|
||||
</ul>
|
||||
@@ -117,161 +134,5 @@
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- THIS IS THE CSS !-->
|
||||
<style>
|
||||
:root {
|
||||
--header-image: url('/img/LINE_TXT_REVERSE.png');
|
||||
--body-bg-image: url('/img/LINE_LOGO_BACKGROUND_WEBSITE.png');
|
||||
|
||||
/* colors */
|
||||
--content: #43256E;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: ADDSBP;
|
||||
src: url('ADDSBP.TTF');
|
||||
}
|
||||
|
||||
body {
|
||||
cursor: url('img/cursor.png'), auto;
|
||||
font-family: 'ADDSBP';
|
||||
margin: 0;
|
||||
background-color: #08031A;
|
||||
background-size: 960px;
|
||||
color: #fceaff;
|
||||
background-image: var(--body-bg-image);
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#headerArea {
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
#container a {
|
||||
color: #1E74FD;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: 100%;
|
||||
background-size: 100%;
|
||||
background-color: #241445;
|
||||
height: 400px;
|
||||
background-image: var(--header-image);
|
||||
}
|
||||
|
||||
#flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: #1E74FD;
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
cursor: url('img/cursor_click.png'), auto;
|
||||
}
|
||||
|
||||
li a:hover {
|
||||
color: #a49cba;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
aside {
|
||||
background-color: #241445;
|
||||
width: 200px;
|
||||
padding: 20px;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
main {
|
||||
background-color: #43256E;
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
/* what's this "order" stuff about??
|
||||
allow me to explain!
|
||||
if you're using both sidebars, the "order" value
|
||||
tells the CSS the order in which to display them.
|
||||
left sidebar is 1, content is 2, and right sidebar is 3! */
|
||||
|
||||
*/ #leftSidebar {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#rightSidebar {
|
||||
order: 3;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #13092D;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
pre {
|
||||
color: #1E74FD;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: #1E74FD;
|
||||
}
|
||||
|
||||
.box {
|
||||
background-color: #13092D;
|
||||
border: 1px solid #1E74FD;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#topBar {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
padding: 8px;
|
||||
font-size: smaller;
|
||||
background-color: #13092D;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 800px) {
|
||||
#flex {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
aside {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
#leftSidebar {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
#rightSidebar {
|
||||
order: 3;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user