Compare commits
No commits in common. "2905ad796a1d5d2434589b99c9b2d5915cbe524d" and "5a7988dc9662d60616c9fd6bd0809968d5219ca0" have entirely different histories.
2905ad796a
...
5a7988dc96
47
about.html
Normal file
47
about.html
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<!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.ts"></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>
|
||||||
177
index.html
177
index.html
@ -1,131 +1,72 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr" id="html">
|
<html lang="fr" id="html" data-bs-theme="dark">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" href="/icon.webp"/>
|
<link rel="icon" href="/icon.jpg"/>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
|
<script type="module" src="./src/main.ts"></script>
|
||||||
|
<script type="module" src="bootstrap/js/dist/"></script>
|
||||||
<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"/>
|
<title>Guams - Home</title>
|
||||||
<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="guams.fr/icon.webp" property="og:image"/>
|
|
||||||
<meta content="#546bab" data-react-helmet="true" name="theme-color"/>
|
|
||||||
<title>Home</title>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main id="closed-main">
|
<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
|
||||||
<h1>Look what you've done !</h1>
|
<div class="container-fluid">
|
||||||
</main>
|
<a class="navbar-brand" href="#">Guams.fr</a>
|
||||||
<main class="main">
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||||
<div class="title-bar window-border">
|
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||||
<div class="title-bar-text">Guams - Home</div>
|
<span class="navbar-toggler-icon"></span>
|
||||||
<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>
|
||||||
<button class="title-bar-button maximize-button">
|
<div class="collapse navbar-collapse" id="navbarNav">
|
||||||
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
<ul class="navbar-nav">
|
||||||
</button>
|
<li class="nav-item">
|
||||||
<button class="title-bar-button close-button" onclick="closeWindow('main')">
|
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
||||||
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
</li>
|
||||||
</button>
|
<li class="nav-item">
|
||||||
</div>
|
<a class="nav-link" href="./about.html">About</a>
|
||||||
</div>
|
</li>
|
||||||
<div class="window-border">
|
<li class="nav-item">
|
||||||
<div class="banner-div window-border">
|
<a class="nav-link" href="https://fish.golf">
|
||||||
<img id="banner" alt="profile banner" src="/src/img/banner_home.webp">
|
<img src="./src/img/fishgolf.gif" alt="fish-golf" title="frien :3">
|
||||||
</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="about-me-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.webp">
|
|
||||||
<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">
|
|
||||||
<div>
|
|
||||||
<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. 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>
|
|
||||||
<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>
|
</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">
|
||||||
|
<main class="d-flex ">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
My gitea instance !
|
||||||
|
</div>
|
||||||
|
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
||||||
|
<h5 class="card-title">This is my gitea instance, this is here I share my projects.</h5>
|
||||||
|
<img src="./src/img/gitea.png" class="showcase img-fluid" alt="gitea showcase">
|
||||||
|
<a href="https://gitea.guams.fr/Guams" class="mt-5 btn btn-primary">Go to website</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header">
|
||||||
|
À bon entendeur
|
||||||
|
</div>
|
||||||
|
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
||||||
|
<h5 class="card-title">This is my personal blog, where I share reviews of the things I enjoy (did it by
|
||||||
|
myself btw 😁).</h5>
|
||||||
|
<img src="./src/img/abonentendeur.png" class="showcase img-fluid" alt="abonentendeur showcase">
|
||||||
|
<footer class="blockquote-footer">It is not 100% functional for now, but I'll fix all the bug that are reported</footer>
|
||||||
|
<div class="d-flex justify-content-center gap-2">
|
||||||
|
<a href="https://gitea.guams.fr/Guams/review-front" class="mt-5 btn btn-primary w-100">Source code</a>
|
||||||
|
<a href="https://abonentendeur.guams.fr" class="mt-5 btn btn-primary w-100">Go to website</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
</div>
|
||||||
</body>
|
</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>
|
|
||||||
<script src="/src/window.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "guams",
|
"name": "asa_pres_bootstrap",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@ -9,8 +9,10 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"typescript": "~5.7.2",
|
||||||
"vite": "^6.2.0"
|
"vite": "^6.2.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"bootstrap": "^5.3.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
148
projects.html
148
projects.html
@ -1,148 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="fr" id="html">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8"/>
|
|
||||||
<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"/>
|
|
||||||
<title>My projects</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<main id="closed-main">
|
|
||||||
<h1>Look what you've done !</h1>
|
|
||||||
</main>
|
|
||||||
<main class="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" onclick="closeWindow('main')">
|
|
||||||
<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.webp">
|
|
||||||
</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.webp">
|
|
||||||
<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.webp">
|
|
||||||
<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.webp">
|
|
||||||
<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>
|
|
||||||
<script src="/src/window.js"></script>
|
|
||||||
</html>
|
|
||||||
BIN
public/icon.webp
BIN
public/icon.webp
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
25
src/gitea.js
25
src/gitea.js
@ -1,25 +0,0 @@
|
|||||||
let xhr = new XMLHttpRequest();
|
|
||||||
|
|
||||||
xhr.open("GET", 'https://gitea.guams.fr/api/v1/repos/Guams/guams_homepage/commits?sha=main');
|
|
||||||
xhr.send();
|
|
||||||
|
|
||||||
xhr.onload = () => {
|
|
||||||
if (xhr.status === 200) {
|
|
||||||
commits = JSON.parse(xhr.response);
|
|
||||||
commits.forEach(commit => {
|
|
||||||
const ul = document.getElementById("changelog-content");
|
|
||||||
const li = document.createElement("li");
|
|
||||||
const h2 = document.createElement("h2");
|
|
||||||
const span = document.createElement("span");
|
|
||||||
h2.innerText = new Date(commit.created).toLocaleDateString();
|
|
||||||
span.innerText = commit.commit.message;
|
|
||||||
li.appendChild(h2);
|
|
||||||
li.appendChild(span);
|
|
||||||
ul.appendChild(li);
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
xhr.onerror = function () {
|
|
||||||
console.error("Network error with gitea");
|
|
||||||
};
|
|
||||||
BIN
src/img/abonentendeur.png
Normal file
BIN
src/img/abonentendeur.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
@ -1,3 +0,0 @@
|
|||||||
<svg width="8" height="7" viewBox="0 0 8 7" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 0H1H2V1H3V2H4H5V1H6V0H7H8V1H7V2H6V3H5V4H6V5H7V6H8V7H7H6V6H5V5H4H3V6H2V7H1H0V6H1V5H2V4H3V3H2V2H1V1H0V0Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 270 B |
Binary file not shown.
|
Before Width: | Height: | Size: 258 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
src/img/gitea.png
Normal file
BIN
src/img/gitea.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
BIN
src/img/guams.gif
Normal file
BIN
src/img/guams.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
@ -1,3 +0,0 @@
|
|||||||
<svg width="9" height="9" viewBox="0 0 9 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 0H0V2V8V9H1H8H9V8V2V0ZM8 2H1V8H8V2Z" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 203 B |
@ -1,3 +0,0 @@
|
|||||||
<svg width="6" height="2" viewBox="0 0 6 2" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<rect width="6" height="2" fill="black"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 141 B |
Binary file not shown.
516
src/main.js
516
src/main.js
@ -1,516 +0,0 @@
|
|||||||
import './style.css'
|
|
||||||
|
|
||||||
(async () => {
|
|
||||||
await loadFull(tsParticles);
|
|
||||||
|
|
||||||
await tsParticles.load({
|
|
||||||
id: "tsparticles",
|
|
||||||
options: {
|
|
||||||
"autoPlay": true,
|
|
||||||
"background": {
|
|
||||||
"color": {
|
|
||||||
"value": "#141414"
|
|
||||||
},
|
|
||||||
"image": "",
|
|
||||||
"position": "",
|
|
||||||
"repeat": "",
|
|
||||||
"size": "",
|
|
||||||
"opacity": 1
|
|
||||||
},
|
|
||||||
"backgroundMask": {
|
|
||||||
"composite": "destination-out",
|
|
||||||
"cover": {
|
|
||||||
"opacity": 1,
|
|
||||||
"color": {
|
|
||||||
"value": ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"enable": false
|
|
||||||
},
|
|
||||||
"clear": true,
|
|
||||||
"defaultThemes": {},
|
|
||||||
"delay": 0,
|
|
||||||
"fullScreen": {
|
|
||||||
"enable": true,
|
|
||||||
"zIndex": -1
|
|
||||||
},
|
|
||||||
"detectRetina": true,
|
|
||||||
"duration": 0,
|
|
||||||
"fpsLimit": 120,
|
|
||||||
"interactivity": {
|
|
||||||
"detectsOn": "window",
|
|
||||||
"events": {
|
|
||||||
"onClick": {
|
|
||||||
"enable": false,
|
|
||||||
"mode": {}
|
|
||||||
},
|
|
||||||
"onDiv": {
|
|
||||||
"selectors": {},
|
|
||||||
"enable": false,
|
|
||||||
"mode": {},
|
|
||||||
"type": "circle"
|
|
||||||
},
|
|
||||||
"onHover": {
|
|
||||||
"enable": false,
|
|
||||||
"mode": {},
|
|
||||||
"parallax": {
|
|
||||||
"enable": false,
|
|
||||||
"force": 2,
|
|
||||||
"smooth": 10
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"resize": {
|
|
||||||
"delay": 0.5,
|
|
||||||
"enable": true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"modes": {
|
|
||||||
"trail": {
|
|
||||||
"delay": 1,
|
|
||||||
"pauseOnStop": false,
|
|
||||||
"quantity": 1
|
|
||||||
},
|
|
||||||
"attract": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4,
|
|
||||||
"easing": "ease-out-quad",
|
|
||||||
"factor": 1,
|
|
||||||
"maxSpeed": 50,
|
|
||||||
"speed": 1
|
|
||||||
},
|
|
||||||
"bounce": {
|
|
||||||
"distance": 200
|
|
||||||
},
|
|
||||||
"bubble": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4,
|
|
||||||
"mix": false,
|
|
||||||
"divs": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4,
|
|
||||||
"mix": false,
|
|
||||||
"selectors": []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"connect": {
|
|
||||||
"distance": 80,
|
|
||||||
"links": {
|
|
||||||
"opacity": 0.5
|
|
||||||
},
|
|
||||||
"radius": 60
|
|
||||||
},
|
|
||||||
"grab": {
|
|
||||||
"distance": 100,
|
|
||||||
"links": {
|
|
||||||
"blink": false,
|
|
||||||
"consent": false,
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"push": {
|
|
||||||
"default": true,
|
|
||||||
"groups": [],
|
|
||||||
"quantity": 4
|
|
||||||
},
|
|
||||||
"remove": {
|
|
||||||
"quantity": 2
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4,
|
|
||||||
"factor": 100,
|
|
||||||
"speed": 1,
|
|
||||||
"maxSpeed": 50,
|
|
||||||
"easing": "ease-out-quad",
|
|
||||||
"divs": {
|
|
||||||
"distance": 200,
|
|
||||||
"duration": 0.4,
|
|
||||||
"factor": 100,
|
|
||||||
"speed": 1,
|
|
||||||
"maxSpeed": 50,
|
|
||||||
"easing": "ease-out-quad",
|
|
||||||
"selectors": []
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"slow": {
|
|
||||||
"factor": 3,
|
|
||||||
"radius": 200
|
|
||||||
},
|
|
||||||
"particle": {
|
|
||||||
"replaceCursor": false,
|
|
||||||
"pauseOnStop": false,
|
|
||||||
"stopDelay": 0
|
|
||||||
},
|
|
||||||
"light": {
|
|
||||||
"area": {
|
|
||||||
"gradient": {
|
|
||||||
"start": {
|
|
||||||
"value": "#ffffff"
|
|
||||||
},
|
|
||||||
"stop": {
|
|
||||||
"value": "#000000"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"radius": 1000
|
|
||||||
},
|
|
||||||
"shadow": {
|
|
||||||
"color": {
|
|
||||||
"value": "#000000"
|
|
||||||
},
|
|
||||||
"length": 2000
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"manualParticles": [],
|
|
||||||
"particles": {
|
|
||||||
"bounce": {
|
|
||||||
"horizontal": {
|
|
||||||
"value": 1
|
|
||||||
},
|
|
||||||
"vertical": {
|
|
||||||
"value": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"collisions": {
|
|
||||||
"absorb": {
|
|
||||||
"speed": 2
|
|
||||||
},
|
|
||||||
"bounce": {
|
|
||||||
"horizontal": {
|
|
||||||
"value": 1
|
|
||||||
},
|
|
||||||
"vertical": {
|
|
||||||
"value": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"enable": false,
|
|
||||||
"maxSpeed": 50,
|
|
||||||
"mode": "bounce",
|
|
||||||
"overlap": {
|
|
||||||
"enable": true,
|
|
||||||
"retries": 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"color": {
|
|
||||||
"value": "#fff",
|
|
||||||
"animation": {
|
|
||||||
"h": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": true,
|
|
||||||
"offset": 0
|
|
||||||
},
|
|
||||||
"s": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": true,
|
|
||||||
"offset": 0
|
|
||||||
},
|
|
||||||
"l": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": true,
|
|
||||||
"offset": 0
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"effect": {
|
|
||||||
"close": true,
|
|
||||||
"fill": true,
|
|
||||||
"options": {},
|
|
||||||
"type": {}
|
|
||||||
},
|
|
||||||
"groups": {},
|
|
||||||
"move": {
|
|
||||||
"angle": {
|
|
||||||
"offset": 0,
|
|
||||||
"value": 90
|
|
||||||
},
|
|
||||||
"attract": {
|
|
||||||
"distance": 200,
|
|
||||||
"enable": false,
|
|
||||||
"rotate": {
|
|
||||||
"x": 3000,
|
|
||||||
"y": 3000
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"center": {
|
|
||||||
"x": 50,
|
|
||||||
"y": 50,
|
|
||||||
"mode": "percent",
|
|
||||||
"radius": 0
|
|
||||||
},
|
|
||||||
"decay": 0,
|
|
||||||
"distance": {},
|
|
||||||
"direction": "bottom",
|
|
||||||
"drift": 0,
|
|
||||||
"enable": true,
|
|
||||||
"gravity": {
|
|
||||||
"acceleration": 9.81,
|
|
||||||
"enable": false,
|
|
||||||
"inverse": false,
|
|
||||||
"maxSpeed": 50
|
|
||||||
},
|
|
||||||
"path": {
|
|
||||||
"clamp": true,
|
|
||||||
"delay": {
|
|
||||||
"value": 0
|
|
||||||
},
|
|
||||||
"enable": false,
|
|
||||||
"options": {}
|
|
||||||
},
|
|
||||||
"outModes": {
|
|
||||||
"default": "out",
|
|
||||||
"bottom": "out",
|
|
||||||
"left": "out",
|
|
||||||
"right": "out",
|
|
||||||
"top": "out"
|
|
||||||
},
|
|
||||||
"random": false,
|
|
||||||
"size": false,
|
|
||||||
"speed": 2,
|
|
||||||
"spin": {
|
|
||||||
"acceleration": 0,
|
|
||||||
"enable": false
|
|
||||||
},
|
|
||||||
"straight": true,
|
|
||||||
"trail": {
|
|
||||||
"enable": false,
|
|
||||||
"length": 10,
|
|
||||||
"fill": {}
|
|
||||||
},
|
|
||||||
"vibrate": false,
|
|
||||||
"warp": false
|
|
||||||
},
|
|
||||||
"number": {
|
|
||||||
"density": {
|
|
||||||
"enable": true,
|
|
||||||
"width": 1920,
|
|
||||||
"height": 1080
|
|
||||||
},
|
|
||||||
"limit": {
|
|
||||||
"mode": "delete",
|
|
||||||
"value": 0
|
|
||||||
},
|
|
||||||
"value": 400
|
|
||||||
},
|
|
||||||
"opacity": {
|
|
||||||
"value": 1,
|
|
||||||
"animation": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 2,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": false,
|
|
||||||
"mode": "auto",
|
|
||||||
"startValue": "random",
|
|
||||||
"destroy": "none"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"reduceDuplicates": false,
|
|
||||||
"shadow": {
|
|
||||||
"blur": 0,
|
|
||||||
"color": {
|
|
||||||
"value": "#000"
|
|
||||||
},
|
|
||||||
"enable": false,
|
|
||||||
"offset": {
|
|
||||||
"x": 0,
|
|
||||||
"y": 0
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"shape": {
|
|
||||||
"close": true,
|
|
||||||
"fill": true,
|
|
||||||
"options": {},
|
|
||||||
"type": "circle"
|
|
||||||
},
|
|
||||||
"size": {
|
|
||||||
"value": 10,
|
|
||||||
"animation": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 5,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": false,
|
|
||||||
"mode": "auto",
|
|
||||||
"startValue": "random",
|
|
||||||
"destroy": "none"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"stroke": {
|
|
||||||
"width": 0
|
|
||||||
},
|
|
||||||
"zIndex": {
|
|
||||||
"value": {
|
|
||||||
"min": 0,
|
|
||||||
"max": 100
|
|
||||||
},
|
|
||||||
"opacityRate": 10,
|
|
||||||
"sizeRate": 10,
|
|
||||||
"velocityRate": 10
|
|
||||||
},
|
|
||||||
"destroy": {
|
|
||||||
"bounds": {},
|
|
||||||
"mode": "none",
|
|
||||||
"split": {
|
|
||||||
"count": 1,
|
|
||||||
"factor": {
|
|
||||||
"value": 3
|
|
||||||
},
|
|
||||||
"rate": {
|
|
||||||
"value": {
|
|
||||||
"min": 4,
|
|
||||||
"max": 9
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"sizeOffset": true,
|
|
||||||
"particles": {}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"roll": {
|
|
||||||
"darken": {
|
|
||||||
"enable": false,
|
|
||||||
"value": 0
|
|
||||||
},
|
|
||||||
"enable": false,
|
|
||||||
"enlighten": {
|
|
||||||
"enable": false,
|
|
||||||
"value": 0
|
|
||||||
},
|
|
||||||
"mode": "vertical",
|
|
||||||
"speed": 25
|
|
||||||
},
|
|
||||||
"tilt": {
|
|
||||||
"value": 0,
|
|
||||||
"animation": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 0,
|
|
||||||
"decay": 0,
|
|
||||||
"sync": false
|
|
||||||
},
|
|
||||||
"direction": "clockwise",
|
|
||||||
"enable": false
|
|
||||||
},
|
|
||||||
"twinkle": {
|
|
||||||
"lines": {
|
|
||||||
"enable": false,
|
|
||||||
"frequency": 0.05,
|
|
||||||
"opacity": 1
|
|
||||||
},
|
|
||||||
"particles": {
|
|
||||||
"enable": false,
|
|
||||||
"frequency": 0.05,
|
|
||||||
"opacity": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"wobble": {
|
|
||||||
"distance": 10,
|
|
||||||
"enable": true,
|
|
||||||
"speed": {
|
|
||||||
"angle": 10,
|
|
||||||
"move": 10
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"life": {
|
|
||||||
"count": 0,
|
|
||||||
"delay": {
|
|
||||||
"value": 0,
|
|
||||||
"sync": false
|
|
||||||
},
|
|
||||||
"duration": {
|
|
||||||
"value": 0,
|
|
||||||
"sync": false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"rotate": {
|
|
||||||
"value": 0,
|
|
||||||
"animation": {
|
|
||||||
"enable": false,
|
|
||||||
"speed": 0,
|
|
||||||
"decay": 0,
|
|
||||||
"sync": false
|
|
||||||
},
|
|
||||||
"direction": "clockwise",
|
|
||||||
"path": false
|
|
||||||
},
|
|
||||||
"orbit": {
|
|
||||||
"animation": {
|
|
||||||
"count": 0,
|
|
||||||
"enable": false,
|
|
||||||
"speed": 1,
|
|
||||||
"decay": 0,
|
|
||||||
"delay": 0,
|
|
||||||
"sync": false
|
|
||||||
},
|
|
||||||
"enable": false,
|
|
||||||
"opacity": 1,
|
|
||||||
"rotation": {
|
|
||||||
"value": 45
|
|
||||||
},
|
|
||||||
"width": 1
|
|
||||||
},
|
|
||||||
"links": {
|
|
||||||
"blink": false,
|
|
||||||
"color": {
|
|
||||||
"value": "#fff"
|
|
||||||
},
|
|
||||||
"consent": false,
|
|
||||||
"distance": 100,
|
|
||||||
"enable": false,
|
|
||||||
"frequency": 1,
|
|
||||||
"opacity": 1,
|
|
||||||
"shadow": {
|
|
||||||
"blur": 5,
|
|
||||||
"color": {
|
|
||||||
"value": "#000"
|
|
||||||
},
|
|
||||||
"enable": false
|
|
||||||
},
|
|
||||||
"triangles": {
|
|
||||||
"enable": false,
|
|
||||||
"frequency": 1
|
|
||||||
},
|
|
||||||
"width": 1,
|
|
||||||
"warp": false
|
|
||||||
},
|
|
||||||
"repulse": {
|
|
||||||
"value": 0,
|
|
||||||
"enabled": false,
|
|
||||||
"distance": 1,
|
|
||||||
"duration": 1,
|
|
||||||
"factor": 1,
|
|
||||||
"speed": 1
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"pauseOnBlur": true,
|
|
||||||
"pauseOnOutsideViewport": true,
|
|
||||||
"responsive": [],
|
|
||||||
"smooth": false,
|
|
||||||
"style": {},
|
|
||||||
"themes": [],
|
|
||||||
"zLayers": 100,
|
|
||||||
"key": "snow",
|
|
||||||
"name": "Snow",
|
|
||||||
"motion": {
|
|
||||||
"disable": false,
|
|
||||||
"reduce": {
|
|
||||||
"factor": 4,
|
|
||||||
"value": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
})();
|
|
||||||
314
src/style.css
314
src/style.css
@ -1,318 +1,40 @@
|
|||||||
* {
|
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
||||||
font-family: 'M PLUS 1p', sans-serif;
|
|
||||||
/*font-family: ms ui gothic, sans-serif;*/
|
|
||||||
text-align: justify;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.window-border {
|
main {
|
||||||
box-shadow: inset -1px -1px #404040, inset 1px 1px #DFDFDF,
|
gap: 50px;
|
||||||
inset -2px -2px #7F7F7F, inset 2px 2px #FFFFFF,
|
border-radius: 4px;
|
||||||
inset -3px -3px #C3C3C3, inset 3px 3px #C3C3C3,
|
padding: 1%;
|
||||||
inset -4px -4px #C3C3C3, inset 4px 4px #C3C3C3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.left-panel {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 7px;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
box-shadow: rgba(0, 0, 0, 0.05) 0 6px 24px 0, rgba(0, 0, 0, 0.08) 0 0 0 1px;
|
||||||
|
min-height: 800px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.changelog-panel, .project-panel {
|
.card {
|
||||||
box-sizing: border-box;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
cursor: url('/src/img/cursor.webp'), default;
|
padding-top: 90px;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.body {
|
||||||
.banner-div {
|
margin: auto;
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: 200px;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
#closed-main > h1 {
|
|
||||||
font-size: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#closed-main {
|
|
||||||
display: none;
|
|
||||||
color: white;
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 50%;
|
|
||||||
-webkit-transform: translate(-50%, -50%);
|
|
||||||
transform: translate(-50%, -50%);}
|
|
||||||
|
|
||||||
main {
|
|
||||||
margin: 16px 0;
|
|
||||||
width: 850px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-bar-text {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0;
|
|
||||||
margin-right: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-bar {
|
|
||||||
align-items: center;
|
|
||||||
background: #131862;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#changelog-content > li {
|
|
||||||
margin: 15px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
word-break: keep-all;
|
|
||||||
margin: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.osaka {
|
|
||||||
width: 50%;
|
width: 50%;
|
||||||
height: auto;
|
padding: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
img.showcase {
|
||||||
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-x: hidden;
|
|
||||||
word-break: break-word;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-height: 400px;
|
|
||||||
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;
|
|
||||||
word-break: break-word;
|
|
||||||
box-sizing: border-box;
|
|
||||||
max-height: 160px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-bar-button {
|
|
||||||
background: silver;
|
|
||||||
border: none;
|
|
||||||
border-radius: 0;
|
|
||||||
box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: transparent;
|
|
||||||
text-shadow: 0 0 #222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: stretch;
|
|
||||||
color: white;
|
|
||||||
background-color: #2e4482;
|
|
||||||
padding: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-link:visited {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.language-list {
|
|
||||||
list-style-type: disclosure-closed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-link {
|
|
||||||
padding: 2px;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation {
|
|
||||||
border-right: 1px solid #bea9de;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #546bab;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-link:hover {
|
|
||||||
text-decoration-line: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav-title {
|
|
||||||
background-color: #bea9de;
|
|
||||||
margin-bottom: 7px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hypertext-link:visited {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hypertext-link {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-link:hover {
|
|
||||||
border-radius: 4px;
|
|
||||||
background-color: #bea9de;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-link {
|
|
||||||
border-bottom: 1px solid #bea9de;
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presentation {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-between;
|
|
||||||
width: 80%;
|
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%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.about-top {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Responsive */
|
|
||||||
|
|
||||||
@media (max-width: 850px) {
|
|
||||||
* {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.presentation {
|
|
||||||
word-break: break-word;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.minimize-button {
|
|
||||||
width: 0;
|
|
||||||
height: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.maximize-button {
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
#banner {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: fill;
|
|
||||||
}
|
|
||||||
|
|
||||||
.osaka {
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
main {
|
main {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
div.body {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.banner-div {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
@ -1,10 +0,0 @@
|
|||||||
function closeWindow(windowClass) {
|
|
||||||
const elements = document.querySelectorAll(`.${windowClass}`);
|
|
||||||
elements.forEach(el => {
|
|
||||||
el.style.display = 'none';
|
|
||||||
});
|
|
||||||
if (windowClass === 'main') {
|
|
||||||
const newMain = document.getElementById("closed-main");
|
|
||||||
newMain.style.display = 'block'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue
Block a user