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="left-panel">
<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="projects.html">My projects</a>
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
@ -90,7 +90,7 @@
</div>
<div class="text status">
<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>
@ -98,14 +98,14 @@
<div class="presentation">
<div>
<h1>Welcome to my website</h1>
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
<span>
<p>Hi, I'm <strong>Guams</strong>, a french developer.</p>
<p>
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
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>
</span><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>
<a class="hypertext-link" target="_blank" href="https://abonentendeur.guams.fr">blog</a>.
</p><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>
<ul>
<li class="language-list">Python</li>
<li class="language-list">C</li>
@ -115,9 +115,9 @@
<li class="language-list">PHP (never again)</li>
<li class="language-list">R (also never again)</li>
</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>
<a href="https://fish.golf">
<a target="_blank" href="https://fish.golf">
<img alt="friend's website" src="src/img/fishgolf.gif"/>
</a>
</div>

18
projects.html
View File

@ -5,6 +5,13 @@
<link rel="icon" href="/icon.webp"/>
<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"/>
<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>
</head>
<body>
@ -34,7 +41,7 @@
<div class="content window-border">
<div class="left-panel">
<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="projects.html">My projects</a>
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
@ -83,7 +90,7 @@
</div>
<div class="text status">
<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>
@ -105,7 +112,7 @@
</div>
</div>
<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"
src="/src/img/gitea.webp">
</a>
@ -131,7 +138,7 @@
</div>
</div>
<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"
src="/src/img/abonentendeur.webp">
</a>
@ -143,8 +150,7 @@
</div>
</div>
</div>
<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>
<iframe class="pub" src="https://john.citrons.xyz/embed?ref=example.com"></iframe>
</div>
</div>
</main>

6
src/gitea.js
View File

@ -10,11 +10,11 @@ xhr.onload = () => {
const ul = document.getElementById("changelog-content");
const li = document.createElement("li");
const h2 = document.createElement("h2");
const span = document.createElement("span");
const p = document.createElement("p");
h2.innerText = new Date(commit.created).toLocaleDateString();
span.innerText = commit.commit.message;
p.innerText = commit.commit.message;
li.appendChild(h2);
li.appendChild(span);
li.appendChild(p);
ul.appendChild(li);
})
}

38
src/style.css
View File

@ -272,8 +272,42 @@ h1 {
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 */
@media (max-width: 450px) {
.projects {
width: 100%;
}
.presentation {
width: 100%;
}
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
@media (max-width: 850px) {
* {
font-size: 12px;
@ -314,6 +348,10 @@ h1 {
width: 100%;
}
.presentation {
min-width: 0;
}
.banner-div {
display: block;
max-width: 100%;