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

added about me window

Browse Source
This commit is contained in:
guams 2025-06-13 21:51:55 +02:00
parent cce2ff6cfc
commit 2baa1f5885
3 changed files with 81 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
index.html
View File

@ -54,16 +54,44 @@
<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="presentation">
<h1>Welcome to my website</h1>
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
<span>
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.
</span><br>
<span>
On my free time I share my thoughts on the works I play or read 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
<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>

BIN
src/img/default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 188 KiB

50
src/style.css
View File

@ -69,6 +69,45 @@ main {
margin: 15px 0;
}
.text {
word-break: keep-all;
margin: 0.5em;
}
.osaka {
width: 50%;
height: auto;
}
.status {
background-color: #546bab;
}
#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,
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;
}
#changelog-content {
overflow-y: scroll;
overflow-x: hidden;
@ -122,7 +161,6 @@ li {
}
.navbar-link {
/*background-color: green;*/
padding: 2px;
margin: 2px;
}
@ -172,6 +210,11 @@ h1 {
min-width: 70%;
}
.about-top {
display: flex;
flex-direction: row;
}
/* Responsive */
@media (max-width: 850px) {
@ -202,6 +245,11 @@ h1 {
object-fit: fill;
}
.osaka {
width: 100%;
height: auto;
}
main {
width:100%;
}