added project page
This commit is contained in:
parent
2baa1f5885
commit
3e585fb7c9
47
about.html
47
about.html
@ -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>
|
|
||||||
35
index.html
35
index.html
@ -5,7 +5,7 @@
|
|||||||
<link rel="icon" href="/icon.jpg"/>
|
<link rel="icon" href="/icon.jpg"/>
|
||||||
<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"/>
|
||||||
<title>Guams - Home</title>
|
<title>Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="window-border">
|
<div class="window-border">
|
||||||
<div class="banner-div 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>
|
</div>
|
||||||
<div class="content window-border">
|
<div class="content window-border">
|
||||||
@ -33,10 +33,10 @@
|
|||||||
<div class="navigation">
|
<div class="navigation">
|
||||||
<span id="nav-title">Navigation</span>
|
<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="./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>
|
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="changelog-panel">
|
<div class="about-me-panel">
|
||||||
<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">
|
||||||
@ -86,19 +86,30 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="presentation">
|
<div class="presentation">
|
||||||
<h1>Welcome to my website</h1>
|
<div>
|
||||||
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
<h1>Welcome to my website</h1>
|
||||||
<span>
|
<span>Hi, I'm <strong>Guams</strong>, a french developer.</span>
|
||||||
|
<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>
|
||||||
</span><br><br>
|
</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>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>
|
||||||
<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>
|
<ul>
|
||||||
<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>
|
<li class="language-list">Python</li>
|
||||||
<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>
|
<li class="language-list">C</li>
|
||||||
<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>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
144
projects.html
Normal file
144
projects.html
Normal 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>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 236 KiB After Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB After Width: | Height: | Size: 54 KiB |
106
src/style.css
106
src/style.css
@ -24,7 +24,7 @@ h1 {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog-panel {
|
.changelog-panel, .project-panel {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
@ -83,27 +83,53 @@ main {
|
|||||||
background-color: #546bab;
|
background-color: #546bab;
|
||||||
}
|
}
|
||||||
|
|
||||||
#about-me-content {
|
.project-top {
|
||||||
overflow-y: scroll;
|
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-x: hidden;
|
overflow-x: hidden;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
max-height: 400px;
|
max-height: 400px;
|
||||||
scrollbar-color: #a2a2a2 #ffffff;
|
box-shadow: inset -1px -1px #404040,
|
||||||
scrollbar-width: thin;
|
inset 1px -1px #DFDFDF,
|
||||||
box-shadow:
|
inset -2px -2px #7F7F7F,
|
||||||
inset -1px -1px #404040,
|
inset 2px -2px #FFFFFF,
|
||||||
inset 1px -1px #DFDFDF,
|
inset -3px -3px #C3C3C3,
|
||||||
inset -2px -2px #7F7F7F,
|
inset 3px -3px #C3C3C3,
|
||||||
inset 2px -2px #FFFFFF,
|
inset -4px -4px #C3C3C3,
|
||||||
inset -3px -3px #C3C3C3,
|
inset 4px -4px #C3C3C3,
|
||||||
inset 3px -3px #C3C3C3,
|
inset -5px -5px #FFFFFF,
|
||||||
inset -4px -4px #C3C3C3,
|
inset 5px -5px #808080,
|
||||||
inset 4px -4px #C3C3C3,
|
inset -6px -6px #DFDFDF,
|
||||||
inset -5px -5px #FFFFFF,
|
inset 6px -6px #000000;
|
||||||
inset 5px -5px #808080,
|
|
||||||
inset -6px -6px #DFDFDF,
|
|
||||||
inset 6px -6px #000000;
|
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
@ -116,19 +142,18 @@ main {
|
|||||||
max-height: 160px;
|
max-height: 160px;
|
||||||
scrollbar-color: #a2a2a2 #ffffff;
|
scrollbar-color: #a2a2a2 #ffffff;
|
||||||
scrollbar-width: thin;
|
scrollbar-width: thin;
|
||||||
box-shadow:
|
box-shadow: inset -1px -1px #404040,
|
||||||
inset -1px -1px #404040,
|
inset 1px -1px #DFDFDF,
|
||||||
inset 1px -1px #DFDFDF,
|
inset -2px -2px #7F7F7F,
|
||||||
inset -2px -2px #7F7F7F,
|
inset 2px -2px #FFFFFF,
|
||||||
inset 2px -2px #FFFFFF,
|
inset -3px -3px #C3C3C3,
|
||||||
inset -3px -3px #C3C3C3,
|
inset 3px -3px #C3C3C3,
|
||||||
inset 3px -3px #C3C3C3,
|
inset -4px -4px #C3C3C3,
|
||||||
inset -4px -4px #C3C3C3,
|
inset 4px -4px #C3C3C3,
|
||||||
inset 4px -4px #C3C3C3,
|
inset -5px -5px #FFFFFF,
|
||||||
inset -5px -5px #FFFFFF,
|
inset 5px -5px #808080,
|
||||||
inset 5px -5px #808080,
|
inset -6px -6px #DFDFDF,
|
||||||
inset -6px -6px #DFDFDF,
|
inset 6px -6px #000000;
|
||||||
inset 6px -6px #000000;
|
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
@ -160,6 +185,10 @@ li {
|
|||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li.language-list {
|
||||||
|
list-style-type: disclosure-closed;
|
||||||
|
}
|
||||||
|
|
||||||
.navbar-link {
|
.navbar-link {
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
@ -205,6 +234,19 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.presentation {
|
.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%;
|
width: 80%;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
min-width: 70%;
|
min-width: 70%;
|
||||||
@ -251,7 +293,7 @@ h1 {
|
|||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
width:100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.banner-div {
|
.banner-div {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user