Refonte du site sur bootstrap !

This commit is contained in:
Guams 2025-03-02 20:25:58 +01:00
parent 70ffed4dc5
commit 5a415bbb52
14 changed files with 229 additions and 194 deletions

25
.gitignore vendored Normal file
View File

@ -0,0 +1,25 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
package-lock.json
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

View File

@ -1,26 +1,42 @@
<!DOCTYPE html>
<html class="no-js" lang="">
<!doctype html>
<html lang="fr" id="html" data-bs-theme="dark">
<head>
<title>Guams</title>
<meta charset="utf-8"/>
<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/img/guams.gif" property="og:image"/>
<meta content="#d67d72" data-react-helmet="true" name="theme-color"/>
<link rel="stylesheet" href="css/style.css"/>
<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>
<main>
<nav>
<h1><a class="nav-item" href="/">Home</a></h1>
<h1><a class="nav-item" href="/about.html">About</a></h1>
<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>
</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>
<a href="https://fish.golf"><img class="badge" title="frien :3" src="img/fishgolf.gif" alt="fishgolf"></a>
<div class="card" style="width: 62%"></div>
<h2>Work in progress...</h2>
<div class="body mt-10">
<main class="mt-5">
<h1 class="text-center">Work in progress...</h1>
</main>
</div>
</body>
</html>

View File

@ -1,94 +0,0 @@
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
body {
background-color: #f6f0e6;
margin: auto;
width: 50%;
padding: 10px;
}
nav {
display: flex;
gap: inherit;
}
.nav-item {
color: #d67d72;
}
.nav-item:hover {
color: #c65d53;
transition: 1.5s;
}
a {
text-decoration: none;
}
h2 {
text-align: center;
color: #d67d72;
}
.git_button_a, .website_link_a {
height: 100%;
color: #ffffff;
}
.git_button, .website_link {
display: flex;
gap: 5px;
align-items: center;
padding: 10px;
border-radius: 8px;
background-color: #d67d72;
transition: 0.3s;
border: none;
}
.git_button:hover, .website_link:hover {
color: #ffffff;
background-color: #c65d53;
border: 1px solid #9b7432;
}
.badge {
width: 88px;
height: 31px;
}
main {
gap: 50px;
border-radius: 4px;
padding: 1%;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
background-color: #ffffff;
}
img.illustration {
border-radius: 5px;
box-shadow: 0 5px 5px black;
object-fit: cover;
width: 100%;
height: 300px;
display: block;
margin: auto;
}
.button_div {
display: flex;
justify-content: space-evenly;
}
.card {
display: flex;
border-top: 1px solid rgba(159, 162, 177, 0.4);
justify-content: center;
flex-direction: column;
gap: 20px;
}

View File

@ -1,87 +1,72 @@
<!DOCTYPE html>
<html class="no-js" lang="">
<!doctype html>
<html lang="fr" id="html" data-bs-theme="dark">
<head>
<title>Guams</title>
<meta charset="utf-8"/>
<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/img/guams.gif" property="og:image"/>
<meta content="#d67d72" data-react-helmet="true" name="theme-color"/>
<link rel="stylesheet" href="css/style.css"/>
<meta charset="UTF-8"/>
<link rel="icon" href="/icon.jpg"/>
<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"/>
<title>Guams - Home</title>
</head>
<body>
<main>
<nav>
<h1><a class="nav-item" href="/">Home</a></h1>
<h1><a class="nav-item" href="/about.html">About</a></h1>
<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>
<a href="https://fish.golf"><img class="badge" title="frien :3" src="img/fishgolf.gif" alt="fishgolf"></a>
<div class="body">
<main class="d-flex ">
<div class="card">
<h2>À bon entendeur</h2>
<img class="illustration" src="img/abonentendeur.png" alt="gitea"/>
<div class="button_div">
<a class="git_button_a" href="https://gitea.guams.fr/Guams/review-front">
<div class="git_button">
<span>Source code</span>
<svg fill="#ffffff"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
width="30">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M5.583 7.229c-2.464-0.005-5.755 1.557-5.573 5.479 0.281 6.125 6.557 6.693 9.068 6.745 0.271 1.146 3.224 5.109 5.411 5.318h9.573c5.74-0.38 10.036-17.365 6.854-17.427-5.271 0.25-8.396 0.375-11.073 0.396v5.297l-0.839-0.365-0.005-4.932c-3.073 0-5.781-0.141-10.917-0.396-0.646-0.005-1.542-0.115-2.5-0.115zM5.927 9.396h0.297c0.349 3.141 0.917 4.974 2.068 7.781-2.938-0.349-5.432-1.198-5.891-4.38-0.24-1.646 0.563-3.365 3.526-3.401zM17.339 12.479c0.198 0.005 0.406 0.042 0.594 0.13l1 0.432-0.714 1.302c-0.109 0-0.219 0.016-0.323 0.052-0.464 0.151-0.708 0.604-0.542 1.021 0.036 0.083 0.089 0.161 0.151 0.229l-1.234 2.25c-0.099 0-0.203 0.016-0.297 0.052-0.464 0.146-0.708 0.604-0.542 1.016 0.172 0.417 0.682 0.63 1.151 0.479 0.464-0.146 0.703-0.604 0.536-1.021-0.047-0.109-0.115-0.208-0.208-0.292l1.203-2.188c0.13 0.010 0.26 0 0.391-0.042 0.104-0.031 0.198-0.083 0.281-0.151 0.464 0.198 0.844 0.354 1.12 0.49 0.406 0.203 0.552 0.339 0.599 0.49 0.042 0.146-0.005 0.427-0.24 0.922-0.172 0.37-0.458 0.896-0.797 1.51-0.115 0-0.229 0.016-0.333 0.052-0.469 0.151-0.708 0.604-0.542 1.021 0.167 0.411 0.682 0.625 1.146 0.479 0.469-0.151 0.708-0.604 0.542-1.021-0.042-0.099-0.104-0.193-0.182-0.271 0.333-0.609 0.62-1.135 0.807-1.526 0.25-0.536 0.38-0.938 0.266-1.323s-0.469-0.635-0.932-0.865c-0.307-0.151-0.693-0.313-1.146-0.505 0.005-0.109-0.010-0.214-0.052-0.318s-0.109-0.198-0.193-0.281l0.703-1.281 3.901 1.682c0.703 0.307 0.995 1.057 0.651 1.682l-2.682 4.906c-0.339 0.625-1.182 0.885-1.885 0.578l-5.516-2.38c-0.703-0.307-0.995-1.057-0.656-1.682l2.682-4.906c0.234-0.432 0.708-0.688 1.208-0.708h0.083z">
</path>
</g>
</svg>
<div class="card-header">
My gitea instance !
</div>
</a>
<a class="website_link_a" href="https://abonentendeur.guams.fr">
<div class="website_link">
<span>Visit website</span>
<svg width="30"
fill="#ffffff"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 576 512">
<path
d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z"/>
</svg>
</div>
</a>
<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">
<h2>My Gitea instance</h2>
<img class="illustration" src="img/gitea.png" alt="gitea"/>
<div class="button_div">
<a class="git_button_a" href="https://gitea.guams.fr/Guams">
<div class="git_button">
<span>Visit website</span>
<svg fill="#ffffff"
viewBox="0 0 32 32"
xmlns="http://www.w3.org/2000/svg"
width="30">
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier"
stroke-linecap="round"
stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M5.583 7.229c-2.464-0.005-5.755 1.557-5.573 5.479 0.281 6.125 6.557 6.693 9.068 6.745 0.271 1.146 3.224 5.109 5.411 5.318h9.573c5.74-0.38 10.036-17.365 6.854-17.427-5.271 0.25-8.396 0.375-11.073 0.396v5.297l-0.839-0.365-0.005-4.932c-3.073 0-5.781-0.141-10.917-0.396-0.646-0.005-1.542-0.115-2.5-0.115zM5.927 9.396h0.297c0.349 3.141 0.917 4.974 2.068 7.781-2.938-0.349-5.432-1.198-5.891-4.38-0.24-1.646 0.563-3.365 3.526-3.401zM17.339 12.479c0.198 0.005 0.406 0.042 0.594 0.13l1 0.432-0.714 1.302c-0.109 0-0.219 0.016-0.323 0.052-0.464 0.151-0.708 0.604-0.542 1.021 0.036 0.083 0.089 0.161 0.151 0.229l-1.234 2.25c-0.099 0-0.203 0.016-0.297 0.052-0.464 0.146-0.708 0.604-0.542 1.016 0.172 0.417 0.682 0.63 1.151 0.479 0.464-0.146 0.703-0.604 0.536-1.021-0.047-0.109-0.115-0.208-0.208-0.292l1.203-2.188c0.13 0.010 0.26 0 0.391-0.042 0.104-0.031 0.198-0.083 0.281-0.151 0.464 0.198 0.844 0.354 1.12 0.49 0.406 0.203 0.552 0.339 0.599 0.49 0.042 0.146-0.005 0.427-0.24 0.922-0.172 0.37-0.458 0.896-0.797 1.51-0.115 0-0.229 0.016-0.333 0.052-0.469 0.151-0.708 0.604-0.542 1.021 0.167 0.411 0.682 0.625 1.146 0.479 0.469-0.151 0.708-0.604 0.542-1.021-0.042-0.099-0.104-0.193-0.182-0.271 0.333-0.609 0.62-1.135 0.807-1.526 0.25-0.536 0.38-0.938 0.266-1.323s-0.469-0.635-0.932-0.865c-0.307-0.151-0.693-0.313-1.146-0.505 0.005-0.109-0.010-0.214-0.052-0.318s-0.109-0.198-0.193-0.281l0.703-1.281 3.901 1.682c0.703 0.307 0.995 1.057 0.651 1.682l-2.682 4.906c-0.339 0.625-1.182 0.885-1.885 0.578l-5.516-2.38c-0.703-0.307-0.995-1.057-0.656-1.682l2.682-4.906c0.234-0.432 0.708-0.688 1.208-0.708h0.083z">
</path>
</g>
</svg>
<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>
</a>
</div>
</div>
</main>
</div>
</body>
</html>

18
package.json Normal file
View File

@ -0,0 +1,18 @@
{
"name": "asa_pres_bootstrap",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "~5.7.2",
"vite": "^6.2.0"
},
"dependencies": {
"bootstrap": "^5.3.3"
}
}

BIN
public/icon.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

View File

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

View File

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 28 KiB

View File

Before

Width:  |  Height:  |  Size: 139 KiB

After

Width:  |  Height:  |  Size: 139 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

20
src/main.ts Normal file
View File

@ -0,0 +1,20 @@
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 ☀️";
}
}

40
src/style.css Normal file
View File

@ -0,0 +1,40 @@
@import '../node_modules/bootstrap/dist/css/bootstrap.css';
main {
gap: 50px;
border-radius: 4px;
padding: 1%;
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 {
width: 100%;
}
body {
padding-top: 90px;
}
div.body {
margin: auto;
width: 50%;
padding: 10px;
}
img.showcase {
width: 80%;
}
@media screen and (max-width: 700px) {
main {
width: 100%;
}
div.body {
width: 100%;
}
}

1
src/vite-env.d.ts vendored Normal file
View File

@ -0,0 +1 @@
/// <reference types="vite/client" />

24
tsconfig.json Normal file
View File

@ -0,0 +1,24 @@
{
"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"]
}