-86

package-lock.json

··· 11 11 "dependencies": { 12 12 "@fontsource/fira-sans": "5.2.7", 13 13 "@fontsource/josefin-sans": "5.2.8", 14 14 - "@tsparticles/engine": "3.9.1", 15 15 - "@tsparticles/move-base": "3.9.1", 16 16 - "@tsparticles/shape-circle": "3.9.1", 17 17 - "@tsparticles/updater-angle": "3.0.0-alpha.1", 18 18 - "@tsparticles/updater-color": "3.9.1", 19 19 - "@tsparticles/updater-opacity": "3.9.1", 20 20 - "@tsparticles/updater-size": "3.9.1", 21 14 "base64url": "3.0.1", 22 15 "normalize.scss": "0.1.0" 23 16 }, ··· 1161 1154 "integrity": "sha512-b9ll4jaFYfXSv6NZAOJ2P0uuyT/Doel7ho2AHLSUz2thtcL6HEb2+qdV2f9wriVvbEoPAj9VuSOgNc0t0f5iMw==", 1162 1155 "dev": true, 1163 1156 "license": "MIT", 1164 1164 - "peer": true, 1165 1157 "dependencies": { 1166 1158 "@mischnic/json-sourcemap": "^0.1.1", 1167 1159 "@parcel/cache": "2.16.3", ··· 3026 3018 "node": ">= 10" 3027 3019 } 3028 3020 }, 3029 3029 - "node_modules/@tsparticles/engine": { 3030 3030 - "version": "3.9.1", 3031 3031 - "resolved": "https://registry.npmjs.org/@tsparticles/engine/-/engine-3.9.1.tgz", 3032 3032 - "integrity": "sha512-DpdgAhWMZ3Eh2gyxik8FXS6BKZ8vyea+Eu5BC4epsahqTGY9V3JGGJcXC6lRJx6cPMAx1A0FaQAojPF3v6rkmQ==", 3033 3033 - "funding": [ 3034 3034 - { 3035 3035 - "type": "github", 3036 3036 - "url": "https://github.com/sponsors/matteobruni" 3037 3037 - }, 3038 3038 - { 3039 3039 - "type": "github", 3040 3040 - "url": "https://github.com/sponsors/tsparticles" 3041 3041 - }, 3042 3042 - { 3043 3043 - "type": "buymeacoffee", 3044 3044 - "url": "https://www.buymeacoffee.com/matteobruni" 3045 3045 - } 3046 3046 - ], 3047 3047 - "hasInstallScript": true, 3048 3048 - "license": "MIT" 3049 3049 - }, 3050 3050 - "node_modules/@tsparticles/move-base": { 3051 3051 - "version": "3.9.1", 3052 3052 - "resolved": "https://registry.npmjs.org/@tsparticles/move-base/-/move-base-3.9.1.tgz", 3053 3053 - "integrity": "sha512-X4huBS27d8srpxwOxliWPUt+NtCwY+8q/cx1DvQxyqmTA8VFCGpcHNwtqiN+9JicgzOvSuaORVqUgwlsc7h4pQ==", 3054 3054 - "license": "MIT", 3055 3055 - "dependencies": { 3056 3056 - "@tsparticles/engine": "3.9.1" 3057 3057 - } 3058 3058 - }, 3059 3059 - "node_modules/@tsparticles/shape-circle": { 3060 3060 - "version": "3.9.1", 3061 3061 - "resolved": "https://registry.npmjs.org/@tsparticles/shape-circle/-/shape-circle-3.9.1.tgz", 3062 3062 - "integrity": "sha512-DqZFLjbuhVn99WJ+A9ajz9YON72RtCcvubzq6qfjFmtwAK7frvQeb6iDTp6Ze9FUipluxVZWVRG4vWTxi2B+/g==", 3063 3063 - "license": "MIT", 3064 3064 - "dependencies": { 3065 3065 - "@tsparticles/engine": "3.9.1" 3066 3066 - } 3067 3067 - }, 3068 3068 - "node_modules/@tsparticles/updater-angle": { 3069 3069 - "version": "3.0.0-alpha.1", 3070 3070 - "resolved": "https://registry.npmjs.org/@tsparticles/updater-angle/-/updater-angle-3.0.0-alpha.1.tgz", 3071 3071 - "integrity": "sha512-IudnQ/0q7s9lV4tlrcFXeW7+B+nfEa3tIfgjhxFYz+kIdDFqf6vRCaFpwush+KwB++g74ZnmUW7LmDhYQsWD3g==", 3072 3072 - "license": "MIT", 3073 3073 - "dependencies": { 3074 3074 - "@tsparticles/engine": "^3.0.0-alpha.1" 3075 3075 - } 3076 3076 - }, 3077 3077 - "node_modules/@tsparticles/updater-color": { 3078 3078 - "version": "3.9.1", 3079 3079 - "resolved": "https://registry.npmjs.org/@tsparticles/updater-color/-/updater-color-3.9.1.tgz", 3080 3080 - "integrity": "sha512-XGWdscrgEMA8L5E7exsE0f8/2zHKIqnTrZymcyuFBw2DCB6BIV+5z6qaNStpxrhq3DbIxxhqqcybqeOo7+Alpg==", 3081 3081 - "license": "MIT", 3082 3082 - "dependencies": { 3083 3083 - "@tsparticles/engine": "3.9.1" 3084 3084 - } 3085 3085 - }, 3086 3086 - "node_modules/@tsparticles/updater-opacity": { 3087 3087 - "version": "3.9.1", 3088 3088 - "resolved": "https://registry.npmjs.org/@tsparticles/updater-opacity/-/updater-opacity-3.9.1.tgz", 3089 3089 - "integrity": "sha512-w778LQuRZJ+IoWzeRdrGykPYSSaTeWfBvLZ2XwYEkh/Ss961InOxZKIpcS6i5Kp/Zfw0fS1ZAuqeHwuj///Osw==", 3090 3090 - "license": "MIT", 3091 3091 - "dependencies": { 3092 3092 - "@tsparticles/engine": "3.9.1" 3093 3093 - } 3094 3094 - }, 3095 3095 - "node_modules/@tsparticles/updater-size": { 3096 3096 - "version": "3.9.1", 3097 3097 - "resolved": "https://registry.npmjs.org/@tsparticles/updater-size/-/updater-size-3.9.1.tgz", 3098 3098 - "integrity": "sha512-3NSVs0O2ApNKZXfd+y/zNhTXSFeG1Pw4peI8e6z/q5+XLbmue9oiEwoPy/tQLaark3oNj3JU7Q903ZijPyXSzw==", 3099 3099 - "license": "MIT", 3100 3100 - "dependencies": { 3101 3101 - "@tsparticles/engine": "3.9.1" 3102 3102 - } 3103 3103 - }, 3104 3021 "node_modules/@types/estree": { 3105 3022 "version": "1.0.6", 3106 3023 "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", ··· 3138 3055 "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", 3139 3056 "dev": true, 3140 3057 "license": "MIT", 3141 3141 - "peer": true, 3142 3058 "bin": { 3143 3059 "acorn": "bin/acorn" 3144 3060 }, ··· 3396 3312 } 3397 3313 ], 3398 3314 "license": "MIT", 3399 3399 - "peer": true, 3400 3315 "dependencies": { 3401 3316 "caniuse-lite": "^1.0.30001716", 3402 3317 "electron-to-chromium": "^1.5.149", ··· 4127 4042 "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", 4128 4043 "dev": true, 4129 4044 "license": "MIT", 4130 4130 - "peer": true, 4131 4045 "dependencies": { 4132 4046 "@eslint-community/eslint-utils": "^4.8.0", 4133 4047 "@eslint-community/regexpp": "^4.12.1",

-7

package.json

··· 20 20 "dependencies": { 21 21 "@fontsource/fira-sans": "5.2.7", 22 22 "@fontsource/josefin-sans": "5.2.8", 23 23 - "@tsparticles/engine": "3.9.1", 24 24 - "@tsparticles/move-base": "3.9.1", 25 25 - "@tsparticles/shape-circle": "3.9.1", 26 26 - "@tsparticles/updater-angle": "3.0.0-alpha.1", 27 27 - "@tsparticles/updater-color": "3.9.1", 28 28 - "@tsparticles/updater-opacity": "3.9.1", 29 29 - "@tsparticles/updater-size": "3.9.1", 30 23 "base64url": "3.0.1", 31 24 "normalize.scss": "0.1.0" 32 25 },

+1 -7

renovate.json

··· 1 1 { 2 2 "$schema": "https://docs.renovatebot.com/renovate-schema.json", 3 3 - "extends": ["config:base", "config:js-app", ":automergeMinor"], 4 4 - "packageRules": [ 5 5 - { 6 6 - "matchPackagePatterns": ["tsparticles"], 7 7 - "groupName": "tsparticles" 8 8 - } 9 9 - ] 3 3 + "extends": ["config:base", "config:js-app", ":automergeMinor"] 10 4 }

-4

src/index.pug

··· 10 10 body.scroll 11 11 include include/noscript 12 12 13 13 - div#particles-js 14 14 - div.particle-gradient 15 15 - 16 13 div.container.wrapper#wrapper 17 14 div.sheet.sheet-splash.wavy#main 18 15 div.row ··· 68 65 div.scroll-indicator 69 66 h1.text-center ▾ 70 67 script(type="module", src="js/application.js") 71 71 - script(type="module", src="js/particles.js")

-53

src/js/particles.js

··· 1 1 - /*! 2 2 - * Personal website of Sefa Eyeoglu 3 3 - * Copyright (C) 2018-2022 Sefa Eyeoglu <contact@scrumplex.net> 4 4 - * 5 5 - * This program is free software: you can redistribute it and/or modify 6 6 - * it under the terms of the GNU Affero General Public License as published by 7 7 - * the Free Software Foundation, either version 3 of the License, or 8 8 - * (at your option) any later version. 9 9 - * 10 10 - * This program is distributed in the hope that it will be useful, 11 11 - * but WITHOUT ANY WARRANTY; without even the implied warranty of 12 12 - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 13 13 - * GNU Affero General Public License for more details. 14 14 - * 15 15 - * You should have received a copy of the GNU Affero General Public License 16 16 - * along with this program. If not, see <https://www.gnu.org/licenses/>. 17 17 - */ 18 18 - 19 19 - import { tsParticles } from "@tsparticles/engine"; 20 20 - import { loadAngleUpdater } from "@tsparticles/updater-angle"; 21 21 - import { loadBaseMover } from "@tsparticles/move-base"; 22 22 - import { loadCircleShape } from "@tsparticles/shape-circle"; 23 23 - import { loadColorUpdater } from "@tsparticles/updater-color"; 24 24 - import { loadOpacityUpdater } from "@tsparticles/updater-opacity"; 25 25 - import { loadSizeUpdater } from "@tsparticles/updater-size"; 26 26 - 27 27 - import options from "./tsParticles-config.json"; 28 28 - import ready from "./_utils"; 29 29 - 30 30 - const { matches } = matchMedia("(min-width: 768px)"); 31 31 - 32 32 - async function loadParticles() { 33 33 - await loadAngleUpdater(tsParticles); 34 34 - await loadBaseMover(tsParticles); 35 35 - await loadCircleShape(tsParticles); 36 36 - await loadColorUpdater(tsParticles); 37 37 - await loadOpacityUpdater(tsParticles); 38 38 - await loadSizeUpdater(tsParticles); 39 39 - tsParticles 40 40 - .load({ id: "particles-js", options }) 41 41 - .then() 42 42 - .catch((e) => { 43 43 - console.error("tsparticles failed to load :("); 44 44 - console.error(e); 45 45 - }); 46 46 - } 47 47 - 48 48 - if (matches) { 49 49 - ready().then(() => { 50 50 - // tsParticles causes heavy lag while loading, lets delay it, so that all animations are smooth at least 51 51 - setTimeout(loadParticles, 500); 52 52 - }); 53 53 - }

-69

src/js/tsParticles-config.json

··· 1 1 - { 2 2 - "autoPlay": true, 3 3 - "detectRetina": true, 4 4 - "duration": 0, 5 5 - "fpsLimit": 60, 6 6 - "fullScreen": { 7 7 - "enable": false, 8 8 - "zIndex": 0 9 9 - }, 10 10 - "particles": { 11 11 - "color": { 12 12 - "value": "#ffffff" 13 13 - }, 14 14 - "move": { 15 15 - "angle": { 16 16 - "offset": 0, 17 17 - "value": 0 18 18 - }, 19 19 - "direction": "top", 20 20 - "drift": 0, 21 21 - "enable": true, 22 22 - "random": true, 23 23 - "size": true, 24 24 - "speed": 8 25 25 - }, 26 26 - "number": { 27 27 - "density": { 28 28 - "enable": true, 29 29 - "area": 800, 30 30 - "factor": 1000 31 31 - }, 32 32 - "limit": 0, 33 33 - "value": 80 34 34 - }, 35 35 - "opacity": { 36 36 - "random": { 37 37 - "enable": true, 38 38 - "minimumValue": 0.1 39 39 - }, 40 40 - "value": { 41 41 - "min": 0, 42 42 - "max": 0.5 43 43 - }, 44 44 - "animation": { 45 45 - "count": 0, 46 46 - "enable": true, 47 47 - "speed": 0.25, 48 48 - "sync": false, 49 49 - "startValue": "min", 50 50 - "minimumValue": 0.1 51 51 - } 52 52 - }, 53 53 - "size": { 54 54 - "random": { 55 55 - "enable": true, 56 56 - "minimumValue": 1 57 57 - }, 58 58 - "value": { 59 59 - "min": 1, 60 60 - "max": 5 61 61 - } 62 62 - } 63 63 - }, 64 64 - "pauseOnBlur": true, 65 65 - "pauseOnOutsideViewport": true, 66 66 - "responsive": [], 67 67 - "themes": [], 68 68 - "zLayers": 100 69 69 - }

-22

src/scss/_base.scss

··· 84 84 opacity: 0; 85 85 animation: none; 86 86 } 87 87 - 88 88 - #particles-js { 89 89 - position: absolute; 90 90 - width: 100%; 91 91 - height: 100%; 92 92 - } 93 93 - 94 94 - #particles-js > canvas { 95 95 - z-index: -10; 96 96 - } 97 97 - 98 98 - #particles-js > .particle-gradient { 99 99 - position: absolute; 100 100 - bottom: 0; 101 101 - height: 20%; 102 102 - width: 100%; 103 103 - background: linear-gradient( 104 104 - to bottom, 105 105 - transparentize($colorBrand, 1) 0%, 106 106 - $colorBrand 100% 107 107 - ); 108 108 - }