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

Compare commits

base: Guams:main
Branches Tags
Guams:main
Guams:refonte
..
compare: Guams:refonte
Branches Tags
Guams:main
Guams:refonte

No commits in common. "main" and "refonte" have entirely different histories.
main ... refonte

7 changed files with 53 additions and 123 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="https://guams.fr/icon.webp" property="og:image"/> <meta content="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 aria-label="minimize" type="button" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button close-button" onclick="closeWindow('main')"> <button 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">
<p id="nav-title">Navigation</p> <span id="nav-title">Navigation</span>
<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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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">A new update of my blog is out!</p> <p class="text">Might update my blog someday...</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>
<p>Hi, I'm <strong>Guams</strong>, a french developer.</p> <span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
<p> <span>
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>
</p><br><br> </span><br><br>
<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> <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>
<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>
<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> <span>You can also take a look at one of my friend's <a class="hypertext-link" href="https://fish.golf">website</a></span>
</div> </div>
<a target="_blank" href="https://fish.golf"> <a href="https://fish.golf">
<img alt="friend's website" src="src/img/fishgolf.gif"/> <img 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 type="module" src="/src/gitea.js"></script> <script src="/src/gitea.js"></script>
<script type="module" src="/src/window.js"></script> <script 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": "vite build", "build": "tsc && vite build",
"preview": "vite preview" "preview": "vite preview"
}, },
"devDependencies": { "devDependencies": {

62
projects.html
View File

@ -5,13 +5,6 @@
<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>
@ -22,13 +15,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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button close-button" onclick="closeWindow('main')"> <button 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 +34,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">
<p id="nav-title">Navigation</p> <span id="nav-title">Navigation</span>
<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 +43,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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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 +61,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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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 +83,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">A new update of my blog is out!</p> <p class="text">Might update my blog someday...</p>
</div> </div>
</div> </div>
</div> </div>
@ -100,22 +93,19 @@
<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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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">
<a class="image-link" href="https://gitea.guams.fr/Guams"> <img class="project-top" alt="screen of my gitea" src="/src/img/gitea.webp">
<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>
@ -126,37 +116,33 @@
<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 aria-label="minimize" class="title-bar-button minimize-button"> <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 aria-label="maximize" class="title-bar-button maximize-button"> <button 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 aria-label="close" class="title-bar-button"> <button 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">
<a class="image-link" href="https://gitea.guams.fr/Guams/review-front"> <img class="project-top" alt="screen of abonentendeur" src="/src/img/abonentendeur.webp">
<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" <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>
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 class="pub" src="https://john.citrons.xyz/embed?ref=example.com"></iframe> <iframe src="https://john.citrons.xyz/embed?ref=example.com"
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 type="module" src="/src/gitea.js"></script> <script src="/src/gitea.js"></script>
<script type="module" src="/src/window.js"></script> <script 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) {
let commits = JSON.parse(xhr.response); 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 p = document.createElement("p"); const span = document.createElement("span");
h2.innerText = new Date(commit.created).toLocaleDateString(); h2.innerText = new Date(commit.created).toLocaleDateString();
p.innerText = commit.commit.message; span.innerText = commit.commit.message;
li.appendChild(h2); li.appendChild(h2);
li.appendChild(p); li.appendChild(span);
ul.appendChild(li); ul.appendChild(li);
}) })
} }

45
src/style.css
View File

@ -232,7 +232,6 @@ h1 {
} }
.hypertext-link { .hypertext-link {
color: white;
font-weight: bold; font-weight: bold;
} }
@ -241,7 +240,6 @@ 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;
@ -272,42 +270,8 @@ 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;
@ -337,21 +301,14 @@ 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 @@
window.closeWindow =function closeWindow(windowClass) { 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
View File

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