diff --git a/Untitled.mp4 b/Untitled.mp4 new file mode 100644 index 0000000..399d322 Binary files /dev/null and b/Untitled.mp4 differ diff --git a/assets/css/style.css b/assets/css/style.css index 938de18..38d2c4b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -108,7 +108,7 @@ button:active { bottom: 0; min-width: 100%; min-height: 100%; - + display: none; } .title { @@ -370,21 +370,24 @@ code { background-color: rgb(9, 24, 37); } -.showcases{ + +.showcases { display: grid; grid-template-columns: auto auto; margin: auto; - - } + +} + .showcase { float: left; box-shadow: 0 0 0.2em rgb(0, 0, 0); border-radius: 3px; width: 800px; -margin: 10px; + margin: 10px; margin-top: 20px; height: 400px; } + .showcase img:not(.background) { padding: 10px; @@ -435,4 +438,103 @@ margin: 10px; #blur { background: linear-gradient(rgb(0, 0, 0, 0), rgb(0, 0, 0, 1)); backdrop-filter: blur(20px); +} + +.pausetext { + float: right; +} + +.pausetext:hover { + cursor: pointer; +} + +.settings { + z-index: 11; + position: fixed; + width: 20%; + background: #2929293c; + border-radius: 3px; + margin-left: auto; + right: 0; + top: 4%; + transition: ease 0.2s all; + backdrop-filter: blur(10px); + background-color: rgba(0, 0, 0, 0.532); +} + +.settings p { + display: inline-block; + transform: translateY(-11px); +} + +.gear { + float: right; + width: 20px; + margin-top: 6px; + margin-right: 10px; +transition: ease-in-out 1s; +} + +.gear:hover { + cursor: pointer; + transform: rotate(360deg); +} + +.switch { + + --button-width: 3.5em; + --button-height: 2em; + --toggle-diameter: 1.5em; + --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2); + --toggle-shadow-offset: 10px; + --toggle-wider: 3em; + --color-grey: #cccccc; + +} + +.slider { + margin-top: 4%; + margin-left: 2%; + display: inline-block; + width: var(--button-width); + height: var(--button-height); + background-color: var(--color-grey); + border-radius: calc(var(--button-height) / 2); + position: relative; + transition: 0.3s all ease-in-out; +} + +.slider::after { + content: ""; + display: inline-block; + width: var(--toggle-diameter); + height: var(--toggle-diameter); + background-color: #fff; + border-radius: calc(var(--toggle-diameter) / 2); + position: absolute; + top: var(--button-toggle-offset); + transform: translateX(var(--button-toggle-offset)); + box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1); + transition: 0.3s all ease-in-out; +} + +.switch input[type="checkbox"]:checked+.slider { + background-color: var(--accent-color); +} + +.switch input[type="checkbox"]:checked+.slider::after { + transform: translateX(calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset))); + box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4) rgba(0, 0, 0, 0.1); +} + +.switch input[type="checkbox"] { + display: none; +} + +.switch input[type="checkbox"]:active+.slider::after { + width: var(--toggle-wider); +} + +.switch input[type="checkbox"]:checked:active+.slider::after { + transform: translateX(calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset))); } \ No newline at end of file diff --git a/assets/images/cbg.png b/assets/images/cbg.png new file mode 100644 index 0000000..a96b96b Binary files /dev/null and b/assets/images/cbg.png differ diff --git a/assets/js/main.js b/assets/js/main.js index fd8ae53..864b74f 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,24 +1,77 @@ -const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png"]; -const colors = ["#676667",'rgb(227, 154, 228)' ,'#C9A333' , 'rgb(236, 36, 36)']; +const backgrounds = ["ubg.png", "vbg.png", "limbg.png", "lbg.png", "cbg.png"]; +const colors = ["#676667", 'rgb(227, 154, 228)', '#C9A333', 'rgb(236, 36, 36)', '#990066']; +var backgroundVideo; +var pausetext; window.onload = function () { + try { document.getElementById("moreInfo").classList.add('div-hidden'); document.getElementById("specs").classList.add('div-hidden'); } catch (exception) { - console.log("something was supposed to happen, but it didnt.") + console.log("something was supposed to happen, but it didnt."); } - const randValue = getRandomInt(backgrounds.length); - document.documentElement.style.setProperty('--accent-color',colors[randValue]); - document.body.style.background = getBackground(randValue); - document.body.style.backgroundSize = "cover"; + + + backgroundVideo = document.getElementById("bgvideo"); + pausetext = document.getElementById("pausetext"); + var enableVideoBackground = document.getElementById("enableVideoBackground"); + var enableRandomBackrounds = document.getElementById("enableRandomBackrounds"); + + + if (localStorage.getItem("enableRandomBackrounds") == "true") { + randomColorAndBackground(); + } + if (localStorage.getItem("enableVideoBackground") == "true") { + backgroundVideo.play(); + backgroundVideo.style.display = "block"; + enableVideoBackground.checked = true; + } + + enableVideoBackground.addEventListener('change', function () { + if (this.checked) { + backgroundVideo.style.display = "block"; + enableRandomBackrounds.checked = false; + backgroundVideo.play(); + setDefaultColorAndBackground(); + localStorage.setItem("enableVideoBackground", true); + } else { + backgroundVideo.style.display = "none"; + localStorage.setItem("enableVideoBackground", false); + } + }); + enableRandomBackrounds.addEventListener('change', function () { + if (this.checked) { + backgroundVideo.style.display = "none"; + randomColorAndBackground(); + enableVideoBackground.checked = false; + localStorage.setItem("enableRandomBackrounds", true); + localStorage.setItem("enableVideoBackground", false); + + } else { + setDefaultColorAndBackground(); + localStorage.setItem("enableRandomBackrounds", false); + } + }); }; +function randomColorAndBackground() { + console.log("ran"); + const randValue = getRandomInt(backgrounds.length); + document.documentElement.style.setProperty('--accent-color', colors[randValue]); + document.body.style.background = getBackground(randValue); + document.body.style.backgroundSize = "cover"; +} +function setDefaultColorAndBackground() { + document.documentElement.style.setProperty('--accent-color', colors[1]); + document.body.style.background = getBackground(1); + document.body.style.backgroundSize = "cover"; +} function pauseVideo() { - if (!video.videoPaused) { - video.pause(); + if (!backgroundVideo.videoPaused) { + backgroundVideo.pause(); } else { - video.play(); + backgroundVideo.play(); } } function showThing(element) { @@ -49,3 +102,15 @@ function getBackground(i) { function getRandomInt(max) { return Math.floor(Math.random() * max); } +function showSettings() { + var settings = document.getElementById("settings"); + if (settings.style.display == "none") { + settings.style.display = "block"; + setTimeout(() => { settings.style.opacity = "1"; }, 200); + + } else { + settings.style.opacity = "0"; + setTimeout(() => { settings.style.display = "none"; }, 200); + + } +} \ No newline at end of file diff --git a/assets/svg/gear.svg b/assets/svg/gear.svg new file mode 100644 index 0000000..a0189e2 --- /dev/null +++ b/assets/svg/gear.svg @@ -0,0 +1,42 @@ + + + + +Created by potrace 1.15, written by Peter Selinger 2001-2017 + + + + + diff --git a/index.html b/index.html index 7ce4476..0a70fee 100644 --- a/index.html +++ b/index.html @@ -10,14 +10,25 @@ - +
Main Page Projects
+ ">Projects
+
+

Video Background

+
+

Random Backgrounds

+

Hello hi, I'm Gnawmon

@@ -25,12 +36,12 @@ I program in c# and python, I wanna learn a low level languagerust, c or c++ idk at one point too. I've made a few games in unity and never posted them online.

- I've made a few sceneryYou're looking at one right now! - Although it's blurred in blender and posted a few on a few sceneryYou're looking at them right now! + Although they're blurred in blender and posted a few on twitter but stopped posting a while back. I also made prodecural textures with substance 3d in the past.

I use an arch based os btw

- +

@@ -51,25 +62,27 @@
  • AMD CPU
  • Runs EndeavourOS with KDE Plasma
  • curl http://gnawmon.vern.cc/endeavour run this to see fetch on your computer
    • -
    ./o. ╭─ EndeavourOS Linux x86_64 - ./sssso- ├─ 6.5.5-arch1-1 - `:osssssss+- ├─ gnawmon - `:+sssssssssso/. ├─󰏗 2 (cargo), 8 (npm), 2263 (pacman), 45 (steam), 31 (flatpak-system) - `-/ossssssssssssso/. ╰─ bash 5.1.16 its supposed to say zsh but idk why it does that - `-/+sssssssssssssssso+:` - `-:/+sssssssssssssssssso+/. ╭─ Plasma 5.27.8 [KF5 5.110.0] [Qt 5.15.10] (x11) - `.://osssssssssssssssssssso++- ├─ konsole - .://+ssssssssssssssssssssssso++: ├─ Hack Nerd Font 10 - .:///ossssssssssssssssssssssssso++: ├─󰂫 AppleDark-ALL-AccentDinamic [KDE], Breeze [Qt] - `:////ssssssssssssssssssssssssssso+++. ├─󰂫 Vimix-Amethyst [KDE/Qt] - `-////+ssssssssssssssssssssssssssso++++- - `..-+oosssssssssssssssssssssssso+++++/` ├─󰍛 AMD Ryzen @ 3.6GHz [60.2°on] - ./++++++++++++++++++++++++++++++/:. ├─󰍹 NVIDIA GeForce GTX - `:::::::::::::::::::::::::------`` ├─ 1920x1080 @ 60.00Hz, 1920x1080 @ 60.00Hz - ├─ 7.08 GiB / 15.54 GiB (45%) - ╰─󰄉 1 hour, 6 mins +
    ./o. gnawmon@lepc + ./sssso- ------------ + `:osssssss+- OS: EndeavourOS Linux x86_64 + `:+sssssssssso/. Kernel: 6.7.8-arch1-1 + `-/ossssssssssssso/. Uptime: 3 hours, 24 mins + `-/+sssssssssssssssso+:` Packages: 2351 (pacman), 22 (flatpak) + `-:/+sssssssssssssssssso+/. Shell: bash 5.2.26 + `.://osssssssssssssssssssso++- Resolution: 1920x1080 @ 60.00Hz, 1920x1080 @ 60.00Hz + .://+ssssssssssssssssssssssso++: DE: Plasma 5.27.10 + .:///ossssssssssssssssssssssssso++: WM: KWin + `:////ssssssssssssssssssssssssssso+++. WM Theme: WillowDarkShader + `-////+ssssssssssssssssssssssssssso++++- Theme: [Plasma], Sierra-dark [GTK2/3] + `..-+oosssssssssssssssssssssssso+++++/` Icons: Vimix-Amethyst [Plasma], Vimix-Amethyst [GTK2/3] + ./++++++++++++++++++++++++++++++/:. Terminal: konsole + `:::::::::::::::::::::::::------`` Terminal Font: Hack Nerd Font 10 + CPU: AMD Ryzen 5 3500X (6) @ 3.6GHz + GPU: NVIDIA GeForce GTX 1080 + Memory: 5.76GiB / 15.54GiB (37%)   -  + +

    You can find the terminal font hereIt's Inconsolata Regular .

    Windows Machine

    @@ -164,7 +177,7 @@ - +

    source code

    diff --git a/minexplorer.html b/minexplorer.html index c554f90..b492b7c 100644 --- a/minexplorer.html +++ b/minexplorer.html @@ -10,11 +10,11 @@ - +
    Main Page Projects MineXplorer Word Finder
    diff --git a/projects.html b/projects.html index 15501be..ec77e34 100644 --- a/projects.html +++ b/projects.html @@ -9,12 +9,24 @@ - -
    Main Page Projects
    + +
    Main Page Projects
    +
    +

    Video Background

    +
    +

    Random Backgrounds

    +