full website overhaul
This commit is contained in:
commit
cdd961e0da
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.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>
|
|
||||||
169
index.html
169
index.html
@ -1,72 +1,131 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="fr" id="html" data-bs-theme="dark">
|
<html lang="fr" id="html">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8"/>
|
<meta charset="UTF-8"/>
|
||||||
<link rel="icon" href="/icon.jpg"/>
|
<link rel="icon" href="/icon.webp"/>
|
||||||
<script type="module" src="./src/main.ts"></script>
|
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+1p&display=swap" rel="stylesheet">
|
||||||
<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"/>
|
||||||
<title>Guams - Home</title>
|
<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="guams.fr/icon.webp" property="og:image"/>
|
||||||
|
<meta content="#546bab" data-react-helmet="true" name="theme-color"/>
|
||||||
|
<title>Home</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav class="fixed-top navbar navbar-expand-lg bg-body-tertiary">
|
<main id="closed-main">
|
||||||
<div class="container-fluid">
|
<h1>Look what you've done !</h1>
|
||||||
<a class="navbar-brand" href="#">Guams.fr</a>
|
</main>
|
||||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
<main class="main">
|
||||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
<div class="title-bar window-border">
|
||||||
<span class="navbar-toggler-icon"></span>
|
<div class="title-bar-text">Guams - Home</div>
|
||||||
</button>
|
<div class="title-bar-controls">
|
||||||
<div class="collapse navbar-collapse" id="navbarNav">
|
<button class="title-bar-button minimize-button">
|
||||||
<ul class="navbar-nav">
|
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||||
<li class="nav-item">
|
</button>
|
||||||
<a class="nav-link active" aria-current="page" href="/">Home</a>
|
<button class="title-bar-button maximize-button">
|
||||||
</li>
|
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||||
<li class="nav-item">
|
</button>
|
||||||
<a class="nav-link" href="./about.html">About</a>
|
<button class="title-bar-button close-button" onclick="closeWindow('main')">
|
||||||
</li>
|
<img alt="close button" src="/src/img/close.svg" aria-hidden="true">
|
||||||
<li class="nav-item">
|
</button>
|
||||||
<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>
|
</div>
|
||||||
<div class="d-flex " role="search">
|
<div class="window-border">
|
||||||
<div class="gap-3 d-flex align-items-center form-check form-switch">
|
<div class="banner-div window-border">
|
||||||
<input class="form-check-input" type="checkbox" id="dark-mode" onclick="changeTheme()" checked>
|
<img id="banner" alt="profile banner" src="/src/img/banner_home.webp">
|
||||||
<label class="form-check-label" id="dark-mode-text" for="dark-mode">Dark theme enabled 🌕</label>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
<div class="content window-border">
|
||||||
<div class="body">
|
<div class="left-panel">
|
||||||
<main class="d-flex ">
|
<div class="navigation">
|
||||||
<div class="card">
|
<span id="nav-title">Navigation</span>
|
||||||
<div class="card-header">
|
<a class="navbar-link" href="/">Home</a>
|
||||||
My gitea instance !
|
<a class="navbar-link" href="projects.html">My projects</a>
|
||||||
|
<a class="navbar-link" href="https://abonentendeur.guams.fr">My blog</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
<div class="about-me-panel">
|
||||||
<h5 class="card-title">This is my gitea instance, this is here I share my projects.</h5>
|
<div class="title-bar window-border">
|
||||||
<img src="./src/img/gitea.png" class="showcase img-fluid" alt="gitea showcase">
|
<div class="title-bar-text">Changelog</div>
|
||||||
<a href="https://gitea.guams.fr/Guams" class="mt-5 btn btn-primary">Go to website</a>
|
<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>
|
||||||
</div>
|
<div class="changelog-panel">
|
||||||
<div class="card">
|
<div class="title-bar window-border">
|
||||||
<div class="card-header">
|
<div class="title-bar-text">About me</div>
|
||||||
À bon entendeur
|
<div class="title-bar-controls">
|
||||||
</div>
|
<button class="title-bar-button minimize-button">
|
||||||
<div class="gap-3 card-body d-flex align-items-center row justify-content-center">
|
<img alt="minimize button" src="/src/img/minimize.svg" aria-hidden="true">
|
||||||
<h5 class="card-title">This is my personal blog, where I share reviews of the things I enjoy (did it by
|
</button>
|
||||||
myself btw 😁).</h5>
|
<button class="title-bar-button maximize-button">
|
||||||
<img src="./src/img/abonentendeur.png" class="showcase img-fluid" alt="abonentendeur showcase">
|
<img alt="maximize button" src="/src/img/maximize.svg" aria-hidden="true">
|
||||||
<footer class="blockquote-footer">It is not 100% functional for now, but I'll fix all the bug that are reported</footer>
|
</button>
|
||||||
<div class="d-flex justify-content-center gap-2">
|
<button class="title-bar-button">
|
||||||
<a href="https://gitea.guams.fr/Guams/review-front" class="mt-5 btn btn-primary w-100">Source code</a>
|
<img alt="close button close-button" src="/src/img/close.svg" aria-hidden="true">
|
||||||
<a href="https://abonentendeur.guams.fr" class="mt-5 btn btn-primary w-100">Go to website</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
<div class="presentation">
|
||||||
</div>
|
<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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
</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 type="module" src="/src/gitea.js"></script>
|
||||||
|
<script type="module" src="/src/window.js"></script>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -1,18 +1,16 @@
|
|||||||
{
|
{
|
||||||
"name": "asa_pres_bootstrap",
|
"name": "guams",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "vite",
|
||||||
"build": "tsc && vite build",
|
"build": "vite build",
|
||||||
"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
Normal file
148
projects.html
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<!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 type="module" src="/src/gitea.js"></script>
|
||||||
|
<script type="module" src="/src/window.js"></script>
|
||||||
|
</html>
|
||||||
BIN
public/icon.jpg
BIN
public/icon.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
BIN
public/icon.webp
Normal file
BIN
public/icon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
25
src/gitea.js
Normal file
25
src/gitea.js
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
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) {
|
||||||
|
let 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");
|
||||||
|
};
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 MiB |
BIN
src/img/abonentendeur.webp
Normal file
BIN
src/img/abonentendeur.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 97 KiB |
BIN
src/img/banner_about.webp
Normal file
BIN
src/img/banner_about.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
src/img/banner_home.webp
Normal file
BIN
src/img/banner_home.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/img/button.webp
Normal file
BIN
src/img/button.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
3
src/img/close.svg
Normal file
3
src/img/close.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 270 B |
BIN
src/img/cursor.webp
Normal file
BIN
src/img/cursor.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 B |
BIN
src/img/default.webp
Normal file
BIN
src/img/default.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 139 KiB |
BIN
src/img/gitea.webp
Normal file
BIN
src/img/gitea.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
3
src/img/maximize.svg
Normal file
3
src/img/maximize.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 203 B |
3
src/img/minimize.svg
Normal file
3
src/img/minimize.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<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>
|
||||||
|
After Width: | Height: | Size: 141 B |
BIN
src/img/template_banner.xcf
Normal file
BIN
src/img/template_banner.xcf
Normal file
Binary file not shown.
516
src/main.js
Normal file
516
src/main.js
Normal file
@ -0,0 +1,516 @@
|
|||||||
|
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
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})();
|
||||||
20
src/main.ts
20
src/main.ts
@ -1,20 +0,0 @@
|
|||||||
import './style.css'
|
|
||||||
import 'bootstrap';
|
|
||||||
|
|
||||||
document.addEventListener("DOMContentLoaded", () => {
|
|
||||||
const chkBox = document.getElementById('dark-mode') as HTMLInputElement;
|
|
||||||
chkBox?.addEventListener("change", changeTheme);
|
|
||||||
});
|
|
||||||
|
|
||||||
function changeTheme() {
|
|
||||||
const htmlElement = document.getElementById('html');
|
|
||||||
const chkBox = document.getElementById('dark-mode') as HTMLInputElement;
|
|
||||||
|
|
||||||
if (chkBox && htmlElement) {
|
|
||||||
htmlElement.setAttribute("data-bs-theme", chkBox.checked ? "dark" : "light");
|
|
||||||
document.getElementById("dark-mode-text")!.innerHTML = chkBox.checked ? "Dark theme enabled 🌕" : "Light theme enabled ☀️";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
322
src/style.css
322
src/style.css
@ -1,40 +1,318 @@
|
|||||||
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
|
* {
|
||||||
|
font-family: 'M PLUS 1p', sans-serif;
|
||||||
main {
|
/*font-family: ms ui gothic, sans-serif;*/
|
||||||
gap: 50px;
|
text-align: justify;
|
||||||
border-radius: 4px;
|
margin: 0;
|
||||||
padding: 1%;
|
font-size: 16px;
|
||||||
display: flex;
|
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.window-border {
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-panel {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
gap: 7px;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.changelog-panel, .project-panel {
|
||||||
|
box-sizing: border-box;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
padding-top: 90px;
|
cursor: url('/src/img/cursor.webp'), default;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.body {
|
|
||||||
margin: auto;
|
.banner-div {
|
||||||
|
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%;
|
||||||
padding: 10px;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
img.showcase {
|
.status {
|
||||||
|
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%;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 700px) {
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
10
src/window.js
Normal file
10
src/window.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
window.closeWindow =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'
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,24 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"target": "ES2020",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"module": "ESNext",
|
|
||||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"isolatedModules": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
13
vite.config.js
Normal file
13
vite.config.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import { resolve } from 'path';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
input: {
|
||||||
|
main: resolve(__dirname, 'index.html'),
|
||||||
|
projects: resolve(__dirname, 'projects.html'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user