diff --git a/about.html b/about.html deleted file mode 100644 index 96dfd6f..0000000 --- a/about.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - Guams - About - - - -
-
-

Work in progress...

-
-
- - \ No newline at end of file diff --git a/index.html b/index.html index dd71cbc..5179ab5 100644 --- a/index.html +++ b/index.html @@ -1,72 +1,131 @@ - + - - - + + - Guams - Home + + + + + + + Home - -
-
-
-
- My gitea instance ! +
+
+ -
-
This is my gitea instance, this is here I share my projects.
- gitea showcase - Go to website +
+
+
Changelog
+
+ + + +
+
+
    +
-
-
-
- À 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 +
+
+
About me
+
+ + + +
+
+
+
+ osaka :3 +
+

Guams

+

21 years old

+

he/him

+
+
+
+

My current status :

+

Might update my blog someday...

+
-
-
+
+
+

Welcome to my website

+ Hi, I'm Guams, a french developer. + + 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 + blog. +

+ 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: + + You can also take a look at one of my friend's website +
+ + + +
+ + + + + + diff --git a/package.json b/package.json index bf82f80..e47c62e 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,16 @@ { - "name": "asa_pres_bootstrap", + "name": "guams", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", - "build": "tsc && vite build", + "build": "vite build", "preview": "vite preview" }, "devDependencies": { - "typescript": "~5.7.2", "vite": "^6.2.0" }, "dependencies": { - "bootstrap": "^5.3.3" } } diff --git a/projects.html b/projects.html new file mode 100644 index 0000000..e0610d4 --- /dev/null +++ b/projects.html @@ -0,0 +1,148 @@ + + + + + + + + My projects + + +
+

Look what you've done !

+
+
+
+
Guams - My projects
+
+ + + +
+
+
+ +
+
+
+ +
+
+
Changelog
+
+ + + +
+
+
    +
+
+
+
+
About me
+
+ + + +
+
+
+
+ osaka :3 +
+

Guams

+

21 years old

+

he/him

+
+
+
+

My current status :

+

Might update my blog someday...

+
+
+
+
+
+
+
+
My own Gitea instance
+
+ + + +
+
+
+ screen of my gitea +
+

Summary :

+

This is my own Gitea instance where I share my projects.

+
+
+
+
+
+
My blog "Abonentendeur"
+
+ + + +
+
+
+ screen of abonentendeur +
+

Summary :

+

This is my blog where I share my thoughts on the works I play or read.

+
+
+
+ +
+
+
+ + + + + + diff --git a/public/icon.jpg b/public/icon.jpg deleted file mode 100644 index 6e0e8ef..0000000 Binary files a/public/icon.jpg and /dev/null differ diff --git a/public/icon.webp b/public/icon.webp new file mode 100644 index 0000000..6346bf0 Binary files /dev/null and b/public/icon.webp differ diff --git a/src/gitea.js b/src/gitea.js new file mode 100644 index 0000000..5f4eac0 --- /dev/null +++ b/src/gitea.js @@ -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"); +}; \ No newline at end of file diff --git a/src/img/abonentendeur.png b/src/img/abonentendeur.png deleted file mode 100644 index 0e3ca23..0000000 Binary files a/src/img/abonentendeur.png and /dev/null differ diff --git a/src/img/abonentendeur.webp b/src/img/abonentendeur.webp new file mode 100644 index 0000000..37ae4b1 Binary files /dev/null and b/src/img/abonentendeur.webp differ diff --git a/src/img/banner_about.webp b/src/img/banner_about.webp new file mode 100644 index 0000000..feb059c Binary files /dev/null and b/src/img/banner_about.webp differ diff --git a/src/img/banner_home.webp b/src/img/banner_home.webp new file mode 100644 index 0000000..8175d07 Binary files /dev/null and b/src/img/banner_home.webp differ diff --git a/src/img/button.webp b/src/img/button.webp new file mode 100644 index 0000000..4417299 Binary files /dev/null and b/src/img/button.webp differ 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/cursor.webp b/src/img/cursor.webp new file mode 100644 index 0000000..25e5627 Binary files /dev/null and b/src/img/cursor.webp differ diff --git a/src/img/default.webp b/src/img/default.webp new file mode 100644 index 0000000..61ccabf Binary files /dev/null and b/src/img/default.webp differ diff --git a/src/img/gitea.png b/src/img/gitea.png deleted file mode 100644 index 2f11703..0000000 Binary files a/src/img/gitea.png and /dev/null differ diff --git a/src/img/gitea.webp b/src/img/gitea.webp new file mode 100644 index 0000000..6c75ca0 Binary files /dev/null and b/src/img/gitea.webp differ diff --git a/src/img/guams.gif b/src/img/guams.gif deleted file mode 100644 index 4d4a764..0000000 Binary files a/src/img/guams.gif and /dev/null differ 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/img/template_banner.xcf b/src/img/template_banner.xcf new file mode 100644 index 0000000..8711189 Binary files /dev/null and b/src/img/template_banner.xcf differ 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..a5b599e 100644 --- a/src/style.css +++ b/src/style.css @@ -1,40 +1,318 @@ -@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; +* { + font-family: 'M PLUS 1p', sans-serif; + /*font-family: ms ui gothic, sans-serif;*/ + text-align: justify; + margin: 0; + font-size: 16px; } -.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%; } 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%; - 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%; + 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 { width: 100%; } - div.body { - width: 100%; - } -} + .banner-div { + display: block; + max-width: 100%; + height: auto; + background: rgba(0, 0, 0, 0.5); + } +} \ No newline at end of file diff --git a/src/window.js b/src/window.js new file mode 100644 index 0000000..0cedcc7 --- /dev/null +++ b/src/window.js @@ -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' + } +} \ 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"] -} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..84e3ab9 --- /dev/null +++ b/vite.config.js @@ -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'), + }, + }, + }, +});