Guams/guams_homepage
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Compare commits

merge into: Guams:refonte
Branches Tags
Guams:main
Guams:refonte
...
pull from: Guams:main
Branches Tags
Guams:main
Guams:refonte

6 Commits
refonte ... main

Author SHA1 Message Date
guams
f62d85e78b responsive and status update 2025-06-19 19:05:44 +02:00
guams
38fd0a0014 image embed with og protocol updated 2025-06-18 18:11:09 +02:00
guams
358bb4c512 accessibility issues 2025-06-15 16:06:14 +02:00
guams
0d613c0c37 fixed responsive problem on chromium 2025-06-15 15:49:45 +02:00
guams
cdd961e0da full website overhaul 2025-06-15 01:19:54 +02:00
Guams
5a7988dc96 Refonte du site sur bootstrap ! 2025-06-15 00:35:00 +02:00
7 changed files with 123 additions and 53 deletions
Show Stats Expand all files Collapse all files

44
index.html
View File

@ -10,7 +10,7 @@
<meta content="Hi, I'm Guams, a french developer. Here you can see my open source projects, my blog and more..." <meta content="Hi, I'm Guams, a french developer. Here you can see my open source projects, my blog and more..."
property="og:description"/> property="og:description"/>
<meta content="https://guams.fr" property="og:url"/> <meta content="https://guams.fr" property="og:url"/>
<meta content="guams.fr/icon.webp" property="og:image"/> <meta content="https://guams.fr/icon.webp" property="og:image"/>
<meta content="#546bab" data-react-helmet="true" name="theme-color"/> <meta content="#546bab" data-react-helmet="true" name="theme-color"/>
<title>Home</title> <title>Home</title>
</head> </head>
@ -22,13 +22,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">Guams - Home</div> <div class="title-bar-text">Guams - Home</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" type="button" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button close-button" onclick="closeWindow('main')"> <button aria-label="close" class="title-bar-button close-button" onclick="closeWindow('main')">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -41,7 +41,7 @@
<div class="content window-border"> <div class="content window-border">
<div class="left-panel"> <div class="left-panel">
<div class="navigation"> <div class="navigation">
<span id="nav-title">Navigation</span> <p id="nav-title">Navigation</p>
<a class="navbar-link" href="/">Home</a> <a class="navbar-link" href="/">Home</a>
<a class="navbar-link" href="projects.html">My projects</a> <a class="navbar-link" href="projects.html">My projects</a>
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a> <a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
@ -50,13 +50,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">Changelog</div> <div class="title-bar-text">Changelog</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -68,13 +68,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">About me</div> <div class="title-bar-text">About me</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -90,7 +90,7 @@
</div> </div>
<div class="text status"> <div class="text status">
<p class="text">My current status :</p> <p class="text">My current status :</p>
<p class="text">Might update my blog someday...</p> <p class="text">A new update of my blog is out!</p>
</div> </div>
</div> </div>
</div> </div>
@ -98,14 +98,14 @@
<div class="presentation"> <div class="presentation">
<div> <div>
<h1>Welcome to my website</h1> <h1>Welcome to my website</h1>
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span> <p>Hi, I'm <strong>Guams</strong>, a french developer.</p>
<span> <p>
I'm currently studying computer science, especially web development. I'm currently studying computer science, especially web development.
My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime. On my My hobbies are giving life to my ideas thanks to my coding skills, reading books and watching anime. On my
free time I share my thoughts on the works I play or read on my free time I share my thoughts on the works I play or read on my
<a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog.</a> <a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog</a>.
</span><br><br> </p><br><br>
<span>I'm still studying, and I mostly learned Java. But since I'm very curious, I'm interested in all kinds of programming languages, such as:</span> <p>I'm still studying, and I mostly learned Java. But since I'm very curious, I'm interested in all kinds of programming languages, such as:</p>
<ul> <ul>
<li class="language-list">Python</li> <li class="language-list">Python</li>
<li class="language-list">C</li> <li class="language-list">C</li>
@ -115,10 +115,10 @@
<li class="language-list">PHP (never again)</li> <li class="language-list">PHP (never again)</li>
<li class="language-list">R (also never again)</li> <li class="language-list">R (also never again)</li>
</ul> </ul>
<span>You can also take a look at one of my friend's <a class="hypertext-link" href="https://fish.golf">website</a></span> <p>You can also take a look at one of my friend's <a target="_blank" class="hypertext-link" href="https://fish.golf">website</a></p>
</div> </div>
<a href="https://fish.golf"> <a target="_blank" href="https://fish.golf">
<img src="src/img/fishgolf.gif"/> <img alt="friend's website" src="src/img/fishgolf.gif"/>
</a> </a>
</div> </div>
</div> </div>
@ -126,6 +126,6 @@
</body> </body>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<script src="/src/gitea.js"></script> <script type="module" src="/src/gitea.js"></script>
<script src="/src/window.js"></script> <script type="module" src="/src/window.js"></script>
</html> </html>

2
package.json
View File

@ -5,7 +5,7 @@
"type": "module", "type": "module",
"scripts": { "scripts": {
"dev": "vite", "dev": "vite",
"build": "tsc && vite build", "build": "vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {

62
projects.html
View File

@ -5,6 +5,13 @@
<link rel="icon" href="/icon.webp"/> <link rel="icon" href="/icon.webp"/>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta content="Guams" property="og:title"/>
<meta content="Hi, I'm Guams, a french developer. Here you can see my open source projects, my blog and more..."
property="og:description"/>
<meta content="https://guams.fr" property="og:url"/>
<meta content="https://guams.fr/icon.webp" property="og:image"/>
<meta content="#546bab" data-react-helmet="true" name="theme-color"/>
<title>My projects</title> <title>My projects</title>
</head> </head>
<body> <body>
@ -15,13 +22,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">Guams - My projects</div> <div class="title-bar-text">Guams - My projects</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button close-button" onclick="closeWindow('main')"> <button aria-label="close" class="title-bar-button close-button" onclick="closeWindow('main')">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -34,7 +41,7 @@
<div class="content window-border"> <div class="content window-border">
<div class="left-panel"> <div class="left-panel">
<div class="navigation"> <div class="navigation">
<span id="nav-title">Navigation</span> <p id="nav-title">Navigation</p>
<a class="navbar-link" href="/">Home</a> <a class="navbar-link" href="/">Home</a>
<a class="navbar-link" href="projects.html">My projects</a> <a class="navbar-link" href="projects.html">My projects</a>
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a> <a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
@ -43,13 +50,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">Changelog</div> <div class="title-bar-text">Changelog</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -61,13 +68,13 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">About me</div> <div class="title-bar-text">About me</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
@ -83,7 +90,7 @@
</div> </div>
<div class="text status"> <div class="text status">
<p class="text">My current status :</p> <p class="text">My current status :</p>
<p class="text">Might update my blog someday...</p> <p class="text">A new update of my blog is out!</p>
</div> </div>
</div> </div>
</div> </div>
@ -93,19 +100,22 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">My own Gitea instance</div> <div class="title-bar-text">My own Gitea instance</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
</div> </div>
<div class="project-content"> <div class="project-content">
<img class="project-top" alt="screen of my gitea" src="/src/img/gitea.webp"> <a class="image-link" href="https://gitea.guams.fr/Guams">
<img title="Open in gitea" class="project-top" alt="screen of my gitea"
src="/src/img/gitea.webp">
</a>
<div class="text status"> <div class="text status">
<u><p class="text">Summary :</p></u> <u><p class="text">Summary :</p></u>
<p class="text">This is my own Gitea instance where I share my projects.</p> <p class="text">This is my own Gitea instance where I share my projects.</p>
@ -116,33 +126,37 @@
<div class="title-bar window-border"> <div class="title-bar window-border">
<div class="title-bar-text">My blog "Abonentendeur"</div> <div class="title-bar-text">My blog "Abonentendeur"</div>
<div class="title-bar-controls"> <div class="title-bar-controls">
<button class="title-bar-button minimize-button"> <button aria-label="minimize" class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true"> <img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button maximize-button"> <button aria-label="maximize" class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true"> <img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button> </button>
<button class="title-bar-button"> <button aria-label="close" class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true"> <img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button> </button>
</div> </div>
</div> </div>
<div class="project-content"> <div class="project-content">
<img class="project-top" alt="screen of abonentendeur" src="/src/img/abonentendeur.webp"> <a class="image-link" href="https://gitea.guams.fr/Guams/review-front">
<img title="Open in gitea" class="project-top" alt="screen of abonentendeur"
src="/src/img/abonentendeur.webp">
</a>
<div class="text status"> <div class="text status">
<u><p class="text">Summary :</p></u> <u><p class="text">Summary :</p></u>
<p class="text">This is my <a href="https://abonentendeur.guams.fr" target="_blank" class="hypertext-link">blog</a> where I share my thoughts on the works I play or read.</p> <p class="text">This is my <a href="https://abonentendeur.guams.fr" target="_blank"
class="hypertext-link">blog</a> where I share my thoughts on the
works I play or read.</p>
</div> </div>
</div> </div>
</div> </div>
<iframe src="https://john.citrons.xyz/embed?ref=example.com" <iframe class="pub" src="https://john.citrons.xyz/embed?ref=example.com"></iframe>
style="margin-left:auto;display:block;margin-right:auto;max-width:732px;width:100%;height:94px;border:none;"></iframe>
</div> </div>
</div> </div>
</main> </main>
</body> </body>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/tsparticles@3.8.1/tsparticles.bundle.min.js"></script>
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
<script src="/src/gitea.js"></script> <script type="module" src="/src/gitea.js"></script>
<script src="/src/window.js"></script> <script type="module" src="/src/window.js"></script>
</html> </html>

8
src/gitea.js
View File

@ -5,16 +5,16 @@ xhr.send();
xhr.onload = () => { xhr.onload = () => {
if (xhr.status === 200) { if (xhr.status === 200) {
commits = JSON.parse(xhr.response); let commits = JSON.parse(xhr.response);
commits.forEach(commit => { commits.forEach(commit => {
const ul = document.getElementById("changelog-content"); const ul = document.getElementById("changelog-content");
const li = document.createElement("li"); const li = document.createElement("li");
const h2 = document.createElement("h2"); const h2 = document.createElement("h2");
const span = document.createElement("span"); const p = document.createElement("p");
h2.innerText = new Date(commit.created).toLocaleDateString(); h2.innerText = new Date(commit.created).toLocaleDateString();
span.innerText = commit.commit.message; p.innerText = commit.commit.message;
li.appendChild(h2); li.appendChild(h2);
li.appendChild(span); li.appendChild(p);
ul.appendChild(li); ul.appendChild(li);
}) })
} }

45
src/style.css
View File

@ -232,6 +232,7 @@ h1 {
} }
.hypertext-link { .hypertext-link {
color: white;
font-weight: bold; font-weight: bold;
} }
@ -240,6 +241,7 @@ h1 {
background-color: #bea9de; background-color: #bea9de;
} }
.navbar-link { .navbar-link {
border-bottom: 1px solid #bea9de; border-bottom: 1px solid #bea9de;
text-decoration: none; text-decoration: none;
@ -270,8 +272,42 @@ h1 {
flex-direction: row; flex-direction: row;
} }
.pub {
margin-left:auto;
display:block;
margin-right:auto;
max-width:732px;
width:100%;
height:94px;
border:none;
}
.image-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Responsive */ /* Responsive */
@media (max-width: 450px) {
.projects {
width: 100%;
}
.presentation {
width: 100%;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@media (max-width: 850px) { @media (max-width: 850px) {
* { * {
font-size: 12px; font-size: 12px;
@ -301,14 +337,21 @@ h1 {
} }
.osaka { .osaka {
width: 100%;
height: auto; height: auto;
} }
.text-status {
text-align: start;
}
main { main {
width: 100%; width: 100%;
} }
.presentation {
min-width: 0;
}
.banner-div { .banner-div {
display: block; display: block;
max-width: 100%; max-width: 100%;

2
src/window.js
View File

@ -1,4 +1,4 @@
function closeWindow(windowClass) { window.closeWindow =function closeWindow(windowClass) {
const elements = document.querySelectorAll(`.${windowClass}`); const elements = document.querySelectorAll(`.${windowClass}`);
elements.forEach(el => { elements.forEach(el => {
el.style.display = 'none'; el.style.display = 'none';

13
vite.config.js Normal file
View File

@ -0,0 +1,13 @@
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig({
build: {
rollupOptions: {
input: {
main: resolve(__dirname, 'index.html'),
projects: resolve(__dirname, 'projects.html'),
},
},
},
});