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

responsive and status update

Browse Source
This commit is contained in:
guams 2025-06-19 19:05:44 +02:00
parent 38fd0a0014
commit f62d85e78b
4 changed files with 62 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -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>
@ -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,9 +115,9 @@
<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 alt="friend's website" src="src/img/fishgolf.gif"/> <img alt="friend's website" src="src/img/fishgolf.gif"/>
</a> </a>
</div> </div>

18
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>
@ -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>
@ -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>
@ -105,7 +112,7 @@
</div> </div>
</div> </div>
<div class="project-content"> <div class="project-content">
<a href="https://gitea.guams.fr/Guams"> <a class="image-link" href="https://gitea.guams.fr/Guams">
<img title="Open in gitea" class="project-top" alt="screen of my gitea" <img title="Open in gitea" class="project-top" alt="screen of my gitea"
src="/src/img/gitea.webp"> src="/src/img/gitea.webp">
</a> </a>
@ -131,7 +138,7 @@
</div> </div>
</div> </div>
<div class="project-content"> <div class="project-content">
<a href="https://gitea.guams.fr/Guams/review-front"> <a class="image-link" href="https://gitea.guams.fr/Guams/review-front">
<img title="Open in gitea" class="project-top" alt="screen of abonentendeur" <img title="Open in gitea" class="project-top" alt="screen of abonentendeur"
src="/src/img/abonentendeur.webp"> src="/src/img/abonentendeur.webp">
</a> </a>
@ -143,8 +150,7 @@
</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>

6
src/gitea.js
View File

@ -10,11 +10,11 @@ xhr.onload = () => {
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);
}) })
} }

38
src/style.css
View File

@ -272,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;
@ -314,6 +348,10 @@ h1 {
width: 100%; width: 100%;
} }
.presentation {
min-width: 0;
}
.banner-div { .banner-div {
display: block; display: block;
max-width: 100%; max-width: 100%;