diff options
Diffstat (limited to 'front')
| -rw-r--r-- | front/package.json | 4 | ||||
| -rw-r--r-- | front/pnpm-lock.yaml | 268 | ||||
| -rw-r--r-- | front/public/assets/images/symbols.png | bin | 0 -> 431 bytes | |||
| -rw-r--r-- | front/src/app.css | 41 | ||||
| -rw-r--r-- | front/src/app.tsx | 3 | ||||
| -rw-r--r-- | front/src/components/animated_bg.tsx | 114 | ||||
| -rw-r--r-- | front/src/components/navbar.css | 7 | ||||
| -rw-r--r-- | front/src/pages/games.tsx | 2 | ||||
| -rw-r--r-- | front/src/pages/home.tsx | 26 | ||||
| -rw-r--r-- | front/src/pages/projects.tsx | 14 | ||||
| -rw-r--r-- | front/vite.config.ts | 3 |
11 files changed, 455 insertions, 27 deletions
diff --git a/front/package.json b/front/package.json index 4ca6ac3..faf0646 100644 --- a/front/package.json +++ b/front/package.json @@ -12,6 +12,8 @@ "deploy": "gh-pages -d dist" }, "dependencies": { + "gl-react": "^5.2.0", + "gl-react-dom": "^5.2.1", "history": "^5.3.0", "preact": "^10.17.0", "preact-router": "^4.1.2", @@ -20,6 +22,8 @@ }, "devDependencies": { "@preact/preset-vite": "^2.5.0", + "@types/gl-react": "^3.15.5", + "@types/gl-react-dom": "^3.15.5", "@types/react-slick": "^0.23.10", "gh-pages": "^6.0.0", "typescript": "^5.1.6", diff --git a/front/pnpm-lock.yaml b/front/pnpm-lock.yaml index fb16f09..7b313de 100644 --- a/front/pnpm-lock.yaml +++ b/front/pnpm-lock.yaml @@ -2,8 +2,12 @@ lockfileVersion: 5.4 specifiers: '@preact/preset-vite': ^2.5.0 + '@types/gl-react': ^3.15.5 + '@types/gl-react-dom': ^3.15.5 '@types/react-slick': ^0.23.10 gh-pages: ^6.0.0 + gl-react: ^5.2.0 + gl-react-dom: ^5.2.1 history: ^5.3.0 preact: ^10.17.0 preact-router: ^4.1.2 @@ -13,6 +17,8 @@ specifiers: vite: ^4.4.9 dependencies: + gl-react: 5.2.0 + gl-react-dom: 5.2.1_gl-react@5.2.0 history: 5.3.0 preact: 10.17.0 preact-router: 4.1.2_preact@10.17.0 @@ -21,6 +27,8 @@ dependencies: devDependencies: '@preact/preset-vite': 2.5.0_preact@10.17.0+vite@4.4.9 + '@types/gl-react': 3.15.5 + '@types/gl-react-dom': 3.15.5 '@types/react-slick': 0.23.10 gh-pages: 6.0.0 typescript: 5.1.6 @@ -566,6 +574,20 @@ packages: picomatch: 2.3.1 dev: true + /@types/gl-react-dom/3.15.5: + resolution: {integrity: sha512-H3GoEkyHRy0ALg1EwFhS/40rD2ofamuDBlKsx/DylnH86vGDuYQRJ7OYISXvoczQINdKpkRdoFE2cB6xp7A6Sw==} + dependencies: + '@types/gl-react': 3.15.5 + '@types/react': 18.2.20 + dev: true + + /@types/gl-react/3.15.5: + resolution: {integrity: sha512-QYgfNKVORF7ggEMXPYz8VPQJiUIq6pLI82Rwtk1dIWrRARzVYZibupWlt9MhUNbBUL0bPQ+xPV1/dQMk5WC6Lg==} + dependencies: + '@types/react': 18.2.20 + csstype: 3.1.2 + dev: true + /@types/prop-types/15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} dev: true @@ -588,6 +610,12 @@ packages: resolution: {integrity: sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==} dev: true + /add-line-numbers/1.0.1: + resolution: {integrity: sha512-w+2a1malCvWwACQFBpZ5/uwmHGaGYT+aGIxA8ONF5vlhe6X/gD3eR8qVoLWa+5nnWAOq2LuPbrqDYqj1pn0WMg==} + dependencies: + pad-left: 1.0.2 + dev: false + /ansi-styles/3.2.1: resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==} engines: {node: '>=4'} @@ -611,6 +639,10 @@ packages: resolution: {integrity: sha512-iAB+JbDEGXhyIUavoDl9WP/Jj106Kz9DEn1DPgYw5ruDn0e3Wgi3sKFm55sASdGBNOQB8F59d9qQ7deqrHA8wQ==} dev: true + /atob-lite/1.0.0: + resolution: {integrity: sha512-ArXcmHR/vwSN37HLVap/Y5SKpz12CuEybxe1sIYl7th/S6SQPrVMNFt6rblJzCOAxn0SHbXpknUtqbAIeo3Aow==} + dev: false + /babel-plugin-transform-hook-names/1.0.2: resolution: {integrity: sha512-5gafyjyyBTTdX/tQQ0hRgu4AhNHG/hqWi0ZZmg2xvs2FgRkJXzDNKBZCyoYqgFkovfDrgM8OoKg8karoUvWeCw==} peerDependencies: @@ -621,6 +653,10 @@ packages: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} dev: true + /bit-twiddle/1.0.2: + resolution: {integrity: sha512-B9UhK0DKFZhoTFcfvAzhqsjStvGJp9vYWf3+6SNTtdSQnvIgfkHbgHrg/e4+TH71N2GDu8tpmCVoyfrL1d7ntA==} + dev: false + /brace-expansion/1.1.11: resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==} dependencies: @@ -683,10 +719,20 @@ packages: resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==} dev: true + /core-util-is/1.0.3: + resolution: {integrity: sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==} + dev: false + /csstype/3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} dev: true + /cwise-compiler/1.1.3: + resolution: {integrity: sha512-WXlK/m+Di8DMMcCjcWr4i+XzcQra9eCdXIJrgh4TUgh0pIS/yJduLxS9JgefsHJ/YVLdgPtXm9r62W92MvanEQ==} + dependencies: + uniq: 1.0.1 + dev: false + /debug/4.3.4: resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==} engines: {node: '>=6.0'} @@ -699,6 +745,10 @@ packages: ms: 2.1.2 dev: true + /dup/1.0.0: + resolution: {integrity: sha512-Bz5jxMMC0wgp23Zm15ip1x8IhYRqJvF3nFC0UInJUDkN1z4uNPk9jTnfCUJXbOGiQ1JbXLQsiV41Fb+HXcj5BA==} + dev: false + /electron-to-chromium/1.4.492: resolution: {integrity: sha512-36K9b/6skMVwAIEsC7GiQ8I8N3soCALVSHqWHzNDtGemAcI9Xu8hP02cywWM0A794rTHm0b0zHPeLJHtgFVamQ==} dev: true @@ -830,6 +880,53 @@ packages: globby: 6.1.0 dev: true + /gl-constants/1.0.0: + resolution: {integrity: sha512-3DNyoAUdb1c+o7jNk5Nm7eh6RSQFi9ZmMQIQb2xxsO27rUopE+IUhoh4xlUvZYBn1YPgUC8BlCnrVjXq/d2dQA==} + dev: false + + /gl-format-compiler-error/1.0.3: + resolution: {integrity: sha512-FtQaBYlsM/rnz7YhLkxG9dLcNDB+ExErIsFV2DXl0nk+YgIZ2i0jMob4BrhT9dNa179zFb0gZMWpNAokytK+Ug==} + dependencies: + add-line-numbers: 1.0.1 + gl-constants: 1.0.0 + glsl-shader-name: 1.0.0 + sprintf-js: 1.1.3 + dev: false + + /gl-react-dom/5.2.1_gl-react@5.2.0: + resolution: {integrity: sha512-RZxOovktk8czle/FiMbiEJJxHLICoHEzxU46GeQ9tqiWMYxj/wj01VbqGVlrn6wVZ+fx77bhRxzn5ptW2uuxbA==} + peerDependencies: + gl-react: '*' + react: '*' + dependencies: + gl-react: 5.2.0 + invariant: 2.2.4 + prop-types: 15.8.1 + raf: 3.4.1 + webgltexture-loader-dom: 1.0.0 + dev: false + + /gl-react/5.2.0: + resolution: {integrity: sha512-A/FxG65e8Zx2RYi9+kYpeAwfFb7qQN0T6BCRXcUiwevUC//i3cH53w0AQRGj1mm96NVvD412mYJatl52qlDuxw==} + peerDependencies: + react: '*' + dependencies: + gl-shader: 4.3.1 + invariant: 2.2.4 + ndarray: 1.0.19 + prop-types: 15.8.1 + typedarray-pool: 1.2.0 + webgltexture-loader: 1.0.0 + webgltexture-loader-ndarray: 1.2.0 + dev: false + + /gl-shader/4.3.1: + resolution: {integrity: sha512-xLoN6XtRLlg97SEqtuzfKc+pVWpVkQ3YjDI1kuCale8tF7+zMhiKlMfmG4IMQPMdKJZQbIc/Ny8ZusEpfh5U+w==} + dependencies: + gl-format-compiler-error: 1.0.3 + weakmap-shim: 1.1.1 + dev: false + /glob/7.2.3: resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==} dependencies: @@ -857,6 +954,19 @@ packages: pinkie-promise: 2.0.1 dev: true + /glsl-shader-name/1.0.0: + resolution: {integrity: sha512-OtHon0dPCbJD+IrVA1vw9QDlp2cS/f9z8X/0y+W7Qy1oZ3U1iFAQUEco2v30V0SAlVLDG5rEfhjEfc3DKdGbFQ==} + dependencies: + atob-lite: 1.0.0 + glsl-tokenizer: 2.1.5 + dev: false + + /glsl-tokenizer/2.1.5: + resolution: {integrity: sha512-XSZEJ/i4dmz3Pmbnpsy3cKh7cotvFlBiZnDOwnj/05EwNp2XrhQ4XKJxT7/pDt4kp4YcpRSKz8eTV7S+mwV6MA==} + dependencies: + through2: 0.6.5 + dev: false + /graceful-fs/4.2.11: resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==} dev: true @@ -888,7 +998,20 @@ packages: /inherits/2.0.4: resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==} - dev: true + + /invariant/2.2.4: + resolution: {integrity: sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==} + dependencies: + loose-envify: 1.4.0 + dev: false + + /iota-array/1.0.0: + resolution: {integrity: sha512-pZ2xT+LOHckCatGQ3DcG/a+QuEqvoxqkiL7tvE8nn3uuu+f6i1TtpB5/FtWFbxUuVr5PZCx8KskuGatbJDXOWA==} + dev: false + + /is-buffer/1.1.6: + resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==} + dev: false /is-core-module/2.13.0: resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==} @@ -896,9 +1019,12 @@ packages: has: 1.0.3 dev: true + /isarray/0.0.1: + resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==} + dev: false + /js-tokens/4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} - dev: true /jsesc/2.5.2: resolution: {integrity: sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==} @@ -941,6 +1067,13 @@ packages: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: false + /loose-envify/1.4.0: + resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} + hasBin: true + dependencies: + js-tokens: 4.0.0 + dev: false + /lru-cache/5.1.1: resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==} dependencies: @@ -970,6 +1103,19 @@ packages: hasBin: true dev: true + /ndarray-ops/1.2.2: + resolution: {integrity: sha512-BppWAFRjMYF7N/r6Ie51q6D4fs0iiGmeXIACKY66fLpnwIui3Wc3CXiD/30mgLbDjPpSLrsqcp3Z62+IcHZsDw==} + dependencies: + cwise-compiler: 1.1.3 + dev: false + + /ndarray/1.0.19: + resolution: {integrity: sha512-B4JHA4vdyZU30ELBw3g7/p9bZupyew5a7tX1Y/gGeF2hafrPaQZhgrGQfsvgfYbgdFZjYwuEcnaobeM/WMW+HQ==} + dependencies: + iota-array: 1.0.0 + is-buffer: 1.1.6 + dev: false + /node-releases/2.0.13: resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==} dev: true @@ -977,7 +1123,6 @@ packages: /object-assign/4.1.1: resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} - dev: true /once/1.4.0: resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} @@ -1004,6 +1149,13 @@ packages: engines: {node: '>=6'} dev: true + /pad-left/1.0.2: + resolution: {integrity: sha512-saxSV1EYAytuZDtQYEwi0DPzooG6aN18xyHrnJtzwjVwmMauzkEecd7hynVJGolNGk1Pl9tltmZqfze4TZTCxg==} + engines: {node: '>=0.10.0'} + dependencies: + repeat-string: 1.6.1 + dev: false + /path-exists/4.0.0: resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==} engines: {node: '>=8'} @@ -1018,6 +1170,10 @@ packages: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} dev: true + /performance-now/2.1.0: + resolution: {integrity: sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==} + dev: false + /picocolors/1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} dev: true @@ -1071,6 +1227,24 @@ packages: /preact/10.17.0: resolution: {integrity: sha512-SNsI8cbaCcUS5tbv9nlXuCfIXnJ9ysBMWk0WnB6UWwcVA3qZ2O6FxqDFECMAMttvLQcW/HaNZUe2BLidyvrVYw==} + /prop-types/15.8.1: + resolution: {integrity: sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==} + dependencies: + loose-envify: 1.4.0 + object-assign: 4.1.1 + react-is: 16.13.1 + dev: false + + /raf/3.4.1: + resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==} + dependencies: + performance-now: 2.1.0 + dev: false + + /react-is/16.13.1: + resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} + dev: false + /react-slick/0.29.0: resolution: {integrity: sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==} peerDependencies: @@ -1084,10 +1258,24 @@ packages: resize-observer-polyfill: 1.5.1 dev: false + /readable-stream/1.0.34: + resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==} + dependencies: + core-util-is: 1.0.3 + inherits: 2.0.4 + isarray: 0.0.1 + string_decoder: 0.10.31 + dev: false + /regenerator-runtime/0.14.0: resolution: {integrity: sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==} dev: false + /repeat-string/1.6.1: + resolution: {integrity: sha512-PV0dzCYDNfRi1jCDbJzpW7jNNDRuCOG/jI5ctQcGKt/clZD+YcPS3yIlWuTJMmESC8aevCFmWJy5wjAFgNqN6w==} + engines: {node: '>=0.10'} + dev: false + /resize-observer-polyfill/1.5.1: resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} dev: false @@ -1125,10 +1313,18 @@ packages: engines: {node: '>=0.10.0'} dev: true + /sprintf-js/1.1.3: + resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==} + dev: false + /string-convert/0.2.1: resolution: {integrity: sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==} dev: false + /string_decoder/0.10.31: + resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==} + dev: false + /strip-outer/1.0.1: resolution: {integrity: sha512-k55yxKHwaXnpYGsOzg4Vl8+tDrWylxDEpknGjhTiZB8dFRU5rTo9CAzeycivxV3s+zlTKwrs6WxMxR95n26kwg==} engines: {node: '>=0.10.0'} @@ -1148,6 +1344,13 @@ packages: engines: {node: '>= 0.4'} dev: true + /through2/0.6.5: + resolution: {integrity: sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==} + dependencies: + readable-stream: 1.0.34 + xtend: 4.0.2 + dev: false + /to-fast-properties/2.0.0: resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} @@ -1160,12 +1363,23 @@ packages: escape-string-regexp: 1.0.5 dev: true + /typedarray-pool/1.2.0: + resolution: {integrity: sha512-YTSQbzX43yvtpfRtIDAYygoYtgT+Rpjuxy9iOpczrjpXLgGoyG7aS5USJXV2d3nn8uHTeb9rXDvzS27zUg5KYQ==} + dependencies: + bit-twiddle: 1.0.2 + dup: 1.0.0 + dev: false + /typescript/5.1.6: resolution: {integrity: sha512-zaWCozRZ6DLEWAWFrVDz1H6FVXzUSfTy5FUMWsQlU8Ym5JP9eO4xkTIROFCQvhQf61z6O/G6ugw3SgAnvvm+HA==} engines: {node: '>=14.17'} hasBin: true dev: true + /uniq/1.0.1: + resolution: {integrity: sha512-Gw+zz50YNKPDKXs+9d+aKAjVwpjNwqzvNpLigIruT4HA9lMZNdMqs9x07kKHB/L9WRzqp4+DlTU5s4wG2esdoA==} + dev: false + /universalify/2.0.0: resolution: {integrity: sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==} engines: {node: '>= 10.0.0'} @@ -1217,10 +1431,58 @@ packages: fsevents: 2.3.2 dev: true + /weakmap-shim/1.1.1: + resolution: {integrity: sha512-/wNyG+1FpiHhnfQo+TuA/XAUpvOOkKVl0A4qpT+oGcj5SlZCLmM+M1Py/3Sj8sy+YrEauCVITOxCsZKo6sPbQg==} + dev: false + + /webgltexture-loader-dom-canvas/1.0.0: + resolution: {integrity: sha512-lRDoPVE4GXFyfsl/E5+sZd7m6304RmBRky0SmgHlqJZJySFrCbQMF/hMQkWNWM5iYks84kRUGlwugW/c6OgpDw==} + dependencies: + webgltexture-loader: 1.0.0 + dev: false + + /webgltexture-loader-dom-image-url/1.0.0: + resolution: {integrity: sha512-KiQ16cLBTjoCQfdvfy1SQP3wMWEPW9ADqsODyhd+6nMg7qD6FmewF3OZs6chF4yfDtlVVXRYI/cDGF1K9MK5Mg==} + dependencies: + webgltexture-loader: 1.0.0 + dev: false + + /webgltexture-loader-dom-video/1.0.0: + resolution: {integrity: sha512-o3zB2XQEMAqgHQeNavoy4q5/lwIIt1MjF6Qj+pUDju9VlovJXGJiCIZ/suv715YgS3k36/pg97847GhV3bHczQ==} + dependencies: + webgltexture-loader: 1.0.0 + dev: false + + /webgltexture-loader-dom/1.0.0: + resolution: {integrity: sha512-JavQ9Hvv3DIYx6WuqzVa76bn2YCcq1lazUdzf277VZWrmxVCln5QFjyTfWZozgYtT21lVeu6MdMOUIbY4xhjqA==} + dependencies: + webgltexture-loader-dom-canvas: 1.0.0 + webgltexture-loader-dom-image-url: 1.0.0 + webgltexture-loader-dom-video: 1.0.0 + dev: false + + /webgltexture-loader-ndarray/1.2.0: + resolution: {integrity: sha512-gWTIqCOYs1XK6Yp4G7XvFDhvCvr6wFjTLPRN/HGBouF4u0to2fAIh5+2cxzEs1WE7eSwsxg1y5aNi1jRXSX+zA==} + dependencies: + ndarray: 1.0.19 + ndarray-ops: 1.2.2 + typedarray-pool: 1.2.0 + webgltexture-loader: 1.0.0 + dev: false + + /webgltexture-loader/1.0.0: + resolution: {integrity: sha512-TbQUdr0Bc3tcJ4pKIFoM9dKyLdYNf9Uxq05oZuIT+2e/vCcfaQS+WjNmW1FwYqaBrzcLr9CA/HBAmvyaS/REGw==} + dev: false + /wrappy/1.0.2: resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true + /xtend/4.0.2: + resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} + engines: {node: '>=0.4'} + dev: false + /yallist/3.1.1: resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==} dev: true diff --git a/front/public/assets/images/symbols.png b/front/public/assets/images/symbols.png Binary files differnew file mode 100644 index 0000000..3d0e9aa --- /dev/null +++ b/front/public/assets/images/symbols.png diff --git a/front/src/app.css b/front/src/app.css index b4086a2..b16cfea 100644 --- a/front/src/app.css +++ b/front/src/app.css @@ -24,6 +24,25 @@ filter: drop-shadow(0 0 2em #673ab8aa); } +/* fade in */ +@keyframes fade-in { + 0% { + opacity: 0; + transform: translateY(1em); + } + 60% { + transform: translateY(-0.2em); + } + 100% { + opacity: 1; + transform: translateY(0); + } +} + +.main-info > * { + animation: fade-in 0.2s ease-in; +} + .main-info { text-align: center; } @@ -64,7 +83,21 @@ color: #e5c07b; } +.back-shadows { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--color-bg) 10%, var(--color-bg) 90%, rgba(0, 0, 0, 0) 100%); +} + @media (max-width: 480px) { + .back-shadows { + margin: auto; + max-width: 80%; + } .main-info-title { font-size: 32pt; } @@ -75,6 +108,10 @@ } @media (max-width: 1150px) and (min-width: 480px) { + .back-shadows { + margin: auto; + max-width: 60%; + } .main-info-title { font-size: 42pt; } @@ -85,6 +122,10 @@ } @media (min-width: 1150px) { + .back-shadows { + margin: auto; + max-width: 40%; + } .main-info-title { font-size: 42pt; } diff --git a/front/src/app.tsx b/front/src/app.tsx index 5ba8e6f..ba081c9 100644 --- a/front/src/app.tsx +++ b/front/src/app.tsx @@ -6,6 +6,7 @@ import Home from './pages/home' import { Router, Route, CustomHistory } from 'preact-router'; import Projects from './pages/projects'; import { HashHistory, createHashHistory } from 'history'; +import { AnimatedBg } from './components/animated_bg'; const hashHistoryAdapter = (hashHistory: HashHistory): CustomHistory => { return { @@ -21,6 +22,7 @@ export function App() { return ( <> <Navbar /> + <div class="back-shadows"></div> <div id="app-main"> <Router history={history}> <Route path="/" component={Home} /> @@ -28,6 +30,7 @@ export function App() { <Route path="/games" component={Games} /> <Route path="/projects" component={Projects} /> </Router> + <AnimatedBg /> </div> </> ) diff --git a/front/src/components/animated_bg.tsx b/front/src/components/animated_bg.tsx new file mode 100644 index 0000000..6a8ab3a --- /dev/null +++ b/front/src/components/animated_bg.tsx @@ -0,0 +1,114 @@ +import { Shaders, Node, GLSL } from "gl-react"; +import { Surface } from "gl-react-dom"; +import React from "preact/compat"; +import { PropsWithChildren } from "preact/compat"; + +const shaders = Shaders.create({ + letters: { + frag: GLSL` +precision highp float; +varying vec2 uv; +uniform vec3 color; +uniform sampler2D t; +uniform float time; +uniform vec2 tiles; +uniform float symbol_count; + +vec2 map_to_symbol_uv(vec2 image_coord, float symbol_index) { + float symbol_width = 1.0 / symbol_count; + float symbol_height = 1.0; + float symbol_x = symbol_index * symbol_width; + return vec2(symbol_x + image_coord.x * symbol_width, image_coord.y * symbol_height); +} + +vec2 tile_index(vec2 p, vec2 tiles) { + return vec2(floor(p.x * tiles.x), floor(p.y * tiles.y)); +} + +vec2 tilefy (vec2 p, vec2 tiles) { + return vec2(fract(p.x * tiles.x), fract(p.y * tiles.y)); +} + +float randf(float n) { + return fract(sin(n) * 43758.5453123); +} + +void main() { + vec2 tile = tile_index(uv, tiles); + float tilerand = randf(tile.x + tile.y * tiles.x); + float v = tilerand + randf(floor(tilerand * time)); + float diff = fract(tilerand * time); + float s = floor(v * 9.0); + vec2 tp = tilefy(uv, tiles); + vec2 tp_center = vec2(0.5, 0.5); + float d = distance(tp, tp_center); + float scale = min(sin(diff * 3.1415) * 1.2, 1.0); + tp = tp_center + (tp - tp_center) / scale; + if (tp.x < 0.0 || tp.x > 1.0 || tp.y < 0.0 || tp.y > 1.0) { + gl_FragColor = vec4(0.0, 0.0, 0.0, 0.0); + return; + } + vec2 p = map_to_symbol_uv(tp, mod(s, symbol_count)); + vec4 c = texture2D(t, p); + c.rgb *= color; + c.a *= uv.y * 4.0; + gl_FragColor = vec4(c.rgb * c.a, c.a); +} +` + } +}); + +const fps = 60; + +const AnimatedBgInternal = ({ tick }: { tick: number }) => { + const t = "/assets/images/symbols.png"; + + return ( + <div style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", zIndex: -10 }}> + <Surface width={window.innerWidth} height={window.innerHeight / 2}> + <Node + shader={shaders.letters} + uniforms={{ + t, + color: [42 / 255, 42 / 255, 80 / 255], + tiles: [Math.ceil(window.innerWidth / 32), Math.ceil(window.innerHeight / 64)], + symbol_count: 9, + time: tick / 60 + }} + uniformsOptions={{ + t: { interpolation: "nearest" } + }} /> + </Surface> + </div> + ); +} + +// a higher order component that provides a tick prop +// that updates every 1/refreshRate seconds +// +// accepts a JSX component as an argument +const timeLoop = ( + C: (props: PropsWithChildren<{ tick: number }>) => React.JSX.Element, + { refreshRate }: { refreshRate: number } +) => { + return class TimeLoop extends React.Component { + interval: any; + state = { tick: 0 }; + + componentDidMount() { + this.interval = setInterval(() => { + this.setState({ tick: this.state.tick + 1 }); + }, 1000 / refreshRate); + } + + componentWillUnmount() { + clearInterval(this.interval); + } + + render() { + return <C {...this.props} tick={this.state.tick} />; + } + }; +} + +export const AnimatedBg = timeLoop(AnimatedBgInternal, { refreshRate: fps }); diff --git a/front/src/components/navbar.css b/front/src/components/navbar.css index 466fdd6..9120052 100644 --- a/front/src/components/navbar.css +++ b/front/src/components/navbar.css @@ -1,7 +1,7 @@ /* on big screens, navbar is fixed to the top of the screen */ .navbar-container { position: fixed; - background-color: var(--color-bg); + /* gradient from top to bottom, full to transparent */ top: 0; width: 100%; z-index: 9999; @@ -16,11 +16,12 @@ } .navbar { - margin-top: 20pt; - margin-bottom: 12pt; + padding-top: 20pt; + padding-bottom: 12pt; align-items: center; justify-content: center; align-self: center; + background: linear-gradient(to bottom, var(--color-bg) 0%, var(--color-bg) 75%, rgba(0, 0, 0, 0) 100%); } .navbar-icon { diff --git a/front/src/pages/games.tsx b/front/src/pages/games.tsx index 2ff4eff..6d0d2bd 100644 --- a/front/src/pages/games.tsx +++ b/front/src/pages/games.tsx @@ -11,7 +11,7 @@ export default function Games() { Game Projects </div> <div class="main-info-subtitle"> - my game projects, mostly from game jams + games I've worked on </div> <div class="projects-container"> { diff --git a/front/src/pages/home.tsx b/front/src/pages/home.tsx index 9b29803..df76b84 100644 --- a/front/src/pages/home.tsx +++ b/front/src/pages/home.tsx @@ -9,20 +9,20 @@ export default function Home() { aka Duckonaut, EchoDuck </div> <img src="assets/images/duckpfp.png" class="main-info-image logo grow" /> - </div> - <div class="about-paragraph"> - <p> - Hello! I'm a programmer, game designer, and artist. I'm currently a student at the Warsaw University of - Technology, studying Computer Science. A list of the games I've worked on is in the <a class="games-link" - href="#/games">games</a> section. Other projects I've been a part of are available in the <a class="projects-link" - href="#/projects">projects</a> section. - I also enjoy some lower-level programming and learning about the inner workings of various systems. The main - technologies I use are <span class="highlight">C#</span>, <span class="highlight">Unity</span> - , <span class="highlight">Python</span>, <span class="highlight">Rust</span> and <span class="highlight">C</span>, - although I'm also familiar with <span class="highlight">Godot</span>, <span class="highlight">C++</span> - , <span class="highlight">Java</span> and some <span class="highlight">JavaScript</span> and <span class="highlight">TypeScript</span>. - </p> + <div class="about-paragraph"> + <p> + Hello! I'm a programmer, game designer, and artist. I'm currently a student at the Warsaw University of + Technology, studying Computer Science. A list of the games I've worked on is in the <a class="games-link" + href="#/games">games</a> section. Other projects I've been a part of are available in the <a class="projects-link" + href="#/projects">projects</a> section. + I also enjoy some lower-level programming and learning about the inner workings of various systems. The main + technologies I use are <span class="highlight">C#</span>, <span class="highlight">Unity</span> + , <span class="highlight">Python</span>, <span class="highlight">Rust</span> and <span class="highlight">C</span>, + although I'm also familiar with <span class="highlight">Godot</span>, <span class="highlight">C++</span> + , <span class="highlight">Java</span> and some <span class="highlight">JavaScript</span> and <span class="highlight">TypeScript</span>. + </p> + </div> </div> </> ); diff --git a/front/src/pages/projects.tsx b/front/src/pages/projects.tsx index ed68529..2753f91 100644 --- a/front/src/pages/projects.tsx +++ b/front/src/pages/projects.tsx @@ -13,14 +13,14 @@ export default function Projects() { <div class="main-info-subtitle"> projects that are not games </div> - </div> - <div class="projects-container"> - { - projects.map((project) => ( - Project(project) - )) - } + <div class="projects-container"> + { + projects.map((project) => ( + Project(project) + )) + } + </div> </div> </> ); diff --git a/front/vite.config.ts b/front/vite.config.ts index 29b326f..997e4fb 100644 --- a/front/vite.config.ts +++ b/front/vite.config.ts @@ -3,5 +3,8 @@ import preact from '@preact/preset-vite' // https://vitejs.dev/config/ export default defineConfig({ + define: { + global: {}, + }, plugins: [preact()], }) |
