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

added project page

Browse Source
This commit is contained in:
guams 2025-06-14 00:44:54 +02:00
parent 2baa1f5885
commit 3e585fb7c9
7 changed files with 241 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
about.html
View File

@ -1,47 +0,0 @@
<!doctype html>
<html lang="fr" id="html" data-bs-theme="dark">
<head>
<meta charset="UTF-8"/>
<link rel="icon" type="image/svg+xml" href="/vite.svg"/>
<script type="module" src="src/main.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Guams - About</title>
</head>
<body>
<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#">Guams.fr</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://fish.golf">
<img src="./src/img/fishgolf.gif" alt="fish-golf" title="frien :3">
</a>
</li>
</ul>
</div>
</div>
<div class="d-flex " role="search">
<div class="gap-3 d-flex align-items-center form-check form-switch">
<input class="form-check-input" type="checkbox" id="dark-mode" onclick="changeTheme()" checked>
<label class="form-check-label" id="dark-mode-text" for="dark-mode">Dark theme enabled 🌕</label>
</div>
</div>
</nav>
<div class="body mt-10">
<main class="mt-5">
<h1 class="text-center">Work in progress...</h1>
</main>
</div>
</body>
</html>

29
index.html
View File

@ -5,7 +5,7 @@
<link rel="icon" href="/icon.jpg"/>
<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"/>
<title>Guams - Home</title>
<title>Home</title>
</head>
<body>
<main>
@ -25,7 +25,7 @@
</div>
<div class="window-border">
<div class="banner-div window-border">
<img id="banner" alt="profile banner" src="/src/img/banner_about.png">
<img id="banner" alt="profile banner" src="/src/img/banner_home.png">
</div>
</div>
<div class="content window-border">
@ -33,10 +33,10 @@
<div class="navigation">
<span id="nav-title">Navigation</span>
<a class="navbar-link" href="/">Home</a>
<a class="navbar-link" href="./about.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>
</div>
<div class="changelog-panel">
<div class="about-me-panel">
<div class="title-bar window-border">
<div class="title-bar-text">Changelog</div>
<div class="title-bar-controls">
@ -86,6 +86,7 @@
</div>
</div>
<div class="presentation">
<div>
<h1>Welcome to my website</h1>
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
<span>
@ -94,11 +95,21 @@
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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque doloribus ipsum quod rerum. Aliquid architecto asperiores debitis doloremque excepturi exercitationem facilis fugiat, nisi non possimus rem sit totam ut veniam.</span>
<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>
<li class="language-list">Python</li>
<li class="language-list">C</li>
<li class="language-list">Rust</li>
<li class="language-list">Java</li>
<li class="language-list">TypeScript (with the Angular framework)</li>
<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>
</div>
<a href="https://fish.golf">
<img src="src/img/fishgolf.gif"/>
</a>
</div>
</div>
</main>

144
projects.html Normal file
View File

@ -0,0 +1,144 @@
<!doctype html>
<html lang="fr" id="html">
<head>
<meta charset="UTF-8"/>
<link rel="icon" href="/icon.jpg"/>
<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"/>
<title>My projects</title>
</head>
<body>
<main>
<div class="title-bar window-border">
<div class="title-bar-text">Guams - My projects</div>
<div class="title-bar-controls">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button close-button">
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<div class="window-border">
<div class="banner-div window-border">
<img id="banner" alt="profile banner" src="/src/img/banner_about.png">
</div>
</div>
<div class="content window-border">
<div class="left-panel">
<div class="navigation">
<span id="nav-title">Navigation</span>
<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>
</div>
<div class="changelog-panel">
<div class="title-bar window-border">
<div class="title-bar-text">Changelog</div>
<div class="title-bar-controls">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<ul id="changelog-content">
</ul>
</div>
<div class="changelog-panel">
<div class="title-bar window-border">
<div class="title-bar-text">About me</div>
<div class="title-bar-controls">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<div id="about-me-content">
<div class="about-top">
<img class="osaka" alt="osaka :3" src="/src/img/default.png">
<div class="about-top-text">
<p>Guams</p>
<p>21 years old</p>
<p>he/him</p>
</div>
</div>
<div class="text status">
<p class="text">My current status :</p>
<p class="text">Might update my blog someday...</p>
</div>
</div>
</div>
</div>
<div class="projects">
<div class="project-panel">
<div class="title-bar window-border">
<div class="title-bar-text">My own Gitea instance</div>
<div class="title-bar-controls">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<div class="project-content">
<img class="project-top" alt="screen of my gitea" src="/src/img/gitea.png">
<div class="text status">
<u><p class="text">Summary :</p></u>
<p class="text">This is my own Gitea instance where I share my projects.</p>
</div>
</div>
</div>
<div class="project-panel">
<div class="title-bar window-border">
<div class="title-bar-text">My blog "Abonentendeur"</div>
<div class="title-bar-controls">
<button class="title-bar-button minimize-button">
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
</button>
<button class="title-bar-button maximize-button">
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
</button>
<button class="title-bar-button">
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
</button>
</div>
</div>
<div class="project-content">
<img class="project-top" alt="screen of abonentendeur" src="/src/img/abonentendeur.png">
<div class="text status">
<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>
</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>
</div>
</div>
</main>
</body>
<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 src="/src/gitea.js"></script>
</html>

BIN
src/img/banner_about.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 236 KiB

After

Width:  |  Height:  |  Size: 244 KiB

BIN
src/img/banner_home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 244 KiB

After

Width:  |  Height:  |  Size: 236 KiB

BIN
src/img/gitea.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 54 KiB

60
src/style.css
View File

@ -24,7 +24,7 @@ h1 {
flex-direction: column;
}
.changelog-panel {
.changelog-panel, .project-panel {
box-sizing: border-box;
width: 100%;
}
@ -83,16 +83,42 @@ main {
background-color: #546bab;
}
.project-top {
align-self: center;
width: 90%;
max-height: 175px;
object-fit: cover;
height: auto;
}
.project-content {
display: flex;
flex-direction: column;
align-items: stretch;
overflow-x: hidden;
word-break: break-word;
box-sizing: border-box;
box-shadow: inset -1px -1px #404040,
inset 1px -1px #DFDFDF,
inset -2px -2px #7F7F7F,
inset 2px -2px #FFFFFF,
inset -3px -3px #C3C3C3,
inset 3px -3px #C3C3C3,
inset -4px -4px #C3C3C3,
inset 4px -4px #C3C3C3,
inset -5px -5px #FFFFFF,
inset 5px -5px #808080,
inset -6px -6px #DFDFDF,
inset 6px -6px #000000;
padding: 7px;
gap: 10px;
}
#about-me-content {
overflow-y: scroll;
overflow-x: hidden;
word-break: break-word;
box-sizing: border-box;
max-height: 400px;
scrollbar-color: #a2a2a2 #ffffff;
scrollbar-width: thin;
box-shadow:
inset -1px -1px #404040,
box-shadow: inset -1px -1px #404040,
inset 1px -1px #DFDFDF,
inset -2px -2px #7F7F7F,
inset 2px -2px #FFFFFF,
@ -116,8 +142,7 @@ main {
max-height: 160px;
scrollbar-color: #a2a2a2 #ffffff;
scrollbar-width: thin;
box-shadow:
inset -1px -1px #404040,
box-shadow: inset -1px -1px #404040,
inset 1px -1px #DFDFDF,
inset -2px -2px #7F7F7F,
inset 2px -2px #FFFFFF,
@ -160,6 +185,10 @@ li {
list-style-type: none;
}
li.language-list {
list-style-type: disclosure-closed;
}
.navbar-link {
padding: 2px;
margin: 2px;
@ -205,6 +234,19 @@ h1 {
}
.presentation {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 80%;
padding: 7px;
min-width: 70%;
}
.projects {
display: flex;
gap: 1rem;
flex-direction: column;
justify-content: space-between;
width: 80%;
padding: 7px;
min-width: 70%;
@ -251,7 +293,7 @@ h1 {
}
main {
width:100%;
width: 100%;
}
.banner-div {