diff --git a/about.html b/about.html index 96dfd6f..60304e3 100644 --- a/about.html +++ b/about.html @@ -3,7 +3,7 @@ - + Guams - About diff --git a/index.html b/index.html index dd71cbc..dd7b849 100644 --- a/index.html +++ b/index.html @@ -1,72 +1,41 @@ - + - - Guams - Home - -
-
-
-
- My gitea instance ! -
-
-
This is my gitea instance, this is here I share my projects.
- gitea showcase - Go to website -
-
-
-
- À bon entendeur -
-
-
This is my personal blog, where I share reviews of the things I enjoy (did it by - myself btw 😁).
- abonentendeur showcase -
It is not 100% functional for now, but I'll fix all the bug that are reported
-
- Source code - Go to website -
-
-
-
-
+ + + diff --git a/package.json b/package.json index bf82f80..6a44282 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "asa_pres_bootstrap", + "name": "guams", "private": true, "version": "0.0.0", "type": "module", @@ -9,10 +9,8 @@ "preview": "vite preview" }, "devDependencies": { - "typescript": "~5.7.2", "vite": "^6.2.0" }, "dependencies": { - "bootstrap": "^5.3.3" } } diff --git a/src/img/close.svg b/src/img/close.svg new file mode 100644 index 0000000..419a57a --- /dev/null +++ b/src/img/close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/maximize.svg b/src/img/maximize.svg new file mode 100644 index 0000000..e9d4982 --- /dev/null +++ b/src/img/maximize.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/img/minimize.svg b/src/img/minimize.svg new file mode 100644 index 0000000..a676778 --- /dev/null +++ b/src/img/minimize.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..c78364e --- /dev/null +++ b/src/main.js @@ -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 + } + } + } + }); +})(); diff --git a/src/main.ts b/src/main.ts deleted file mode 100644 index ce74d9f..0000000 --- a/src/main.ts +++ /dev/null @@ -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 ☀️"; - } -} - - - diff --git a/src/style.css b/src/style.css index 48e8fd3..f4d94c7 100644 --- a/src/style.css +++ b/src/style.css @@ -1,40 +1,78 @@ -@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%; +* { + font-family: ms ui gothic, sans-serif; + margin: 0; + font-size: 12px; } body { - padding-top: 90px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } -div.body { +main { margin: auto; - width: 50%; - padding: 10px; + width: 850px; } -img.showcase { - width: 80%; +.title-bar-text { + color: #fff; + font-weight: 700; + letter-spacing: 0; + margin-right: 24px; } -@media screen and (max-width: 700px) { - main { - width: 100%; - } - div.body { - width: 100%; - } - +.title-bar { + 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; + align-items: center; + background: #19191E; + display: flex; + justify-content: space-between; + padding: 7px; } + +.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-around; + align-items: stretch; + background-color: #373737; + color: white; + 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; + padding: 7px; +} + +.navbar-link:visited { + color: white; +} + +li { + list-style-type: none; +} + +.navbar-link:hover { + text-decoration-line: underline; +} + +nav { + border-right: 1px solid #0a0a0a; +} + +.navbar-link { + text-decoration: none; + color: white; +} + +.welcome { + background-color: red; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json deleted file mode 100644 index a4883f2..0000000 --- a/tsconfig.json +++ /dev/null @@ -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"] -}