From c2198990b848e6e4df6491b4937dbf99383fe6dc Mon Sep 17 00:00:00 2001 From: Saurabh Date: Wed, 25 Jun 2025 09:14:13 +0000 Subject: [PATCH 1/2] feat: Add hover card glow effect and glitch effect --- package-lock.json | 591 +++++++++++++++++++++ package.json | 5 + script.js | 65 --- contributors.json => src/contributors.json | 1 + index.html => src/index.html | 0 src/script.js | 73 +++ src/style.css | 158 ++++++ style.css | 85 --- 8 files changed, 828 insertions(+), 150 deletions(-) create mode 100644 package-lock.json create mode 100644 package.json delete mode 100644 script.js rename contributors.json => src/contributors.json (83%) rename index.html => src/index.html (100%) create mode 100644 src/script.js create mode 100644 src/style.css delete mode 100644 style.css diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ead7f63 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,591 @@ +{ + "name": "workspace", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "dependencies": { + "http-server": "^14.1.1" + } + }, + "node_modules/ansi-styles": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", + "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "license": "MIT", + "dependencies": { + "color-convert": "^2.0.1" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/chalk/ansi-styles?sponsor=1" + } + }, + "node_modules/async": { + "version": "3.2.6", + "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", + "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", + "license": "MIT" + }, + "node_modules/basic-auth": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz", + "integrity": "sha512-NF+epuEdnUYVlGuhaxbbq+dvJttwLnGY+YixlXlME5KpQ5W3CnXA5cVTneY3SPbPDRkcjMbifrwmFYcClgOZeg==", + "license": "MIT", + "dependencies": { + "safe-buffer": "5.1.2" + }, + "engines": { + "node": ">= 0.8" + } + }, + "node_modules/call-bind-apply-helpers": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz", + "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/call-bound": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz", + "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "get-intrinsic": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/chalk": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", + "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", + "license": "MIT", + "dependencies": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/chalk/chalk?sponsor=1" + } + }, + "node_modules/color-convert": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", + "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "license": "MIT", + "dependencies": { + "color-name": "~1.1.4" + }, + "engines": { + "node": ">=7.0.0" + } + }, + "node_modules/color-name": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", + "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "license": "MIT" + }, + "node_modules/corser": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", + "integrity": "sha512-utCYNzRSQIZNPIcGZdQc92UVJYAhtGAteCFg0yRaFm8f0P+CPtyGyHXJcGXnffjCybUCEx3FQ2G7U3/o9eIkVQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4.0" + } + }, + "node_modules/debug": { + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz", + "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==", + "license": "MIT", + "dependencies": { + "ms": "^2.1.3" + }, + "engines": { + "node": ">=6.0" + }, + "peerDependenciesMeta": { + "supports-color": { + "optional": true + } + } + }, + "node_modules/dunder-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", + "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.1", + "es-errors": "^1.3.0", + "gopd": "^1.2.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-define-property": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz", + "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/es-object-atoms": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz", + "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/eventemitter3": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", + "license": "MIT" + }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-intrinsic": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz", + "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==", + "license": "MIT", + "dependencies": { + "call-bind-apply-helpers": "^1.0.2", + "es-define-property": "^1.0.1", + "es-errors": "^1.3.0", + "es-object-atoms": "^1.1.1", + "function-bind": "^1.1.2", + "get-proto": "^1.0.1", + "gopd": "^1.2.0", + "has-symbols": "^1.1.0", + "hasown": "^2.0.2", + "math-intrinsics": "^1.1.0" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/get-proto": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz", + "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==", + "license": "MIT", + "dependencies": { + "dunder-proto": "^1.0.1", + "es-object-atoms": "^1.0.0" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/gopd": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz", + "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "license": "MIT", + "engines": { + "node": ">=8" + } + }, + "node_modules/has-symbols": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz", + "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/hasown": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz", + "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==", + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/he": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", + "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", + "license": "MIT", + "bin": { + "he": "bin/he" + } + }, + "node_modules/html-encoding-sniffer": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", + "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", + "license": "MIT", + "dependencies": { + "whatwg-encoding": "^2.0.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/http-proxy": { + "version": "1.18.1", + "resolved": "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz", + "integrity": "sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==", + "license": "MIT", + "dependencies": { + "eventemitter3": "^4.0.0", + "follow-redirects": "^1.0.0", + "requires-port": "^1.0.0" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/http-server": { + "version": "14.1.1", + "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.1.tgz", + "integrity": "sha512-+cbxadF40UXd9T01zUHgA+rlo2Bg1Srer4+B4NwIHdaGxAGGv59nYRnGGDJ9LBk7alpS0US+J+bLLdQOOkJq4A==", + "license": "MIT", + "dependencies": { + "basic-auth": "^2.0.1", + "chalk": "^4.1.2", + "corser": "^2.0.1", + "he": "^1.2.0", + "html-encoding-sniffer": "^3.0.0", + "http-proxy": "^1.18.1", + "mime": "^1.6.0", + "minimist": "^1.2.6", + "opener": "^1.5.1", + "portfinder": "^1.0.28", + "secure-compare": "3.0.1", + "union": "~0.5.0", + "url-join": "^4.0.1" + }, + "bin": { + "http-server": "bin/http-server" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/iconv-lite": { + "version": "0.6.3", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", + "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", + "license": "MIT", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3.0.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/math-intrinsics": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz", + "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/mime": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz", + "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==", + "license": "MIT", + "bin": { + "mime": "cli.js" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/minimist": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz", + "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", + "license": "MIT" + }, + "node_modules/object-inspect": { + "version": "1.13.4", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz", + "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==", + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/opener": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", + "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", + "license": "(WTFPL OR MIT)", + "bin": { + "opener": "bin/opener-bin.js" + } + }, + "node_modules/portfinder": { + "version": "1.0.37", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.37.tgz", + "integrity": "sha512-yuGIEjDAYnnOex9ddMnKZEMFE0CcGo6zbfzDklkmT1m5z734ss6JMzN9rNB3+RR7iS+F10D4/BVIaXOyh8PQKw==", + "license": "MIT", + "dependencies": { + "async": "^3.2.6", + "debug": "^4.3.6" + }, + "engines": { + "node": ">= 10.12" + } + }, + "node_modules/qs": { + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.1.0" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/requires-port": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", + "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==", + "license": "MIT" + }, + "node_modules/safe-buffer": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz", + "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==", + "license": "MIT" + }, + "node_modules/safer-buffer": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz", + "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==", + "license": "MIT" + }, + "node_modules/secure-compare": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", + "integrity": "sha512-AckIIV90rPDcBcglUwXPF3kg0P0qmPsPXAj6BBEENQE1p5yA1xfmDJzfi1Tappj37Pv2mVbKpL3Z1T+Nn7k1Qw==", + "license": "MIT" + }, + "node_modules/side-channel": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", + "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3", + "side-channel-list": "^1.0.0", + "side-channel-map": "^1.0.1", + "side-channel-weakmap": "^1.0.2" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-list": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz", + "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==", + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-map": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz", + "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/side-channel-weakmap": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz", + "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==", + "license": "MIT", + "dependencies": { + "call-bound": "^1.0.2", + "es-errors": "^1.3.0", + "get-intrinsic": "^1.2.5", + "object-inspect": "^1.13.3", + "side-channel-map": "^1.0.1" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "license": "MIT", + "dependencies": { + "has-flag": "^4.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/union": { + "version": "0.5.0", + "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", + "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", + "dependencies": { + "qs": "^6.4.0" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/url-join": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", + "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", + "license": "MIT" + }, + "node_modules/whatwg-encoding": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", + "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", + "license": "MIT", + "dependencies": { + "iconv-lite": "0.6.3" + }, + "engines": { + "node": ">=12" + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..f72c21f --- /dev/null +++ b/package.json @@ -0,0 +1,5 @@ +{ + "dependencies": { + "http-server": "^14.1.1" + } +} diff --git a/script.js b/script.js deleted file mode 100644 index 3d9f53c..0000000 --- a/script.js +++ /dev/null @@ -1,65 +0,0 @@ -const grid = document.getElementById('devGrid'); -const searchInput = document.getElementById('search'); - -fetch('../contributors.json') - .then(res => res.json()) - .then(usernames => { - console.log('Fetched usernames:', usernames); - usernames.forEach(username => { - console.log('Fetching user data for:', username); - fetch(`https://api.github.com/users/${username}`) - .then(res => res.json()) - .then(user => { - console.log('User data for', username + ':', user); - if (!user || user.message === "Not Found") { - console.warn('User not found or invalid:', username); - return; - } - - // Now fetch user's repositories to get top languages - console.log('Fetching repos for:', username); - fetch(user.repos_url) - .then(res => res.json()) - .then(repos => { - console.log('Repos data for', username + ':', repos); - const langCount = {}; - - repos.forEach(repo => { - if (repo.language) { - langCount[repo.language] = (langCount[repo.language] || 0) + 1; - } - }); - - const topLangs = Object.entries(langCount) - .sort((a, b) => b[1] - a[1]) - .slice(0, 3) - .map(entry => entry[0]) - .join(', ') || 'N/A'; - - const card = document.createElement('div'); - card.className = 'card'; - card.innerHTML = ` - ${user.login} -

${user.name || user.login}

-

@${user.login}

-

Top Languages: ${topLangs}

- View GitHub - `; - grid.appendChild(card); - console.log('Card appended for:', username); - }) - .catch(err => console.error('Error fetching repos for', username + ':', err)); - }) - .catch(err => console.error('Failed to load user for', username + ':', err)); - }); - }) - .catch(err => console.error('Error loading contributors.json:', err)); - -// 🔍 Search Function -searchInput.addEventListener('input', e => { - const value = e.target.value.toLowerCase(); - Array.from(grid.children).forEach(card => { - const username = card.querySelector('p').textContent.toLowerCase(); - card.style.display = username.includes(value) ? 'block' : 'none'; - }); -}); diff --git a/contributors.json b/src/contributors.json similarity index 83% rename from contributors.json rename to src/contributors.json index f962794..a774239 100644 --- a/contributors.json +++ b/src/contributors.json @@ -1,4 +1,5 @@ [ + "saurabhkun", "sanjanamutkiri", "komal", "SotaKabasawa", diff --git a/index.html b/src/index.html similarity index 100% rename from index.html rename to src/index.html diff --git a/src/script.js b/src/script.js new file mode 100644 index 0000000..f8bfc05 --- /dev/null +++ b/src/script.js @@ -0,0 +1,73 @@ +const grid = document.getElementById("devGrid"); +const searchInput = document.getElementById("search"); + +fetch("../contributors.json") + .then((res) => res.json()) + .then((usernames) => { + usernames.forEach((username, index) => { + fetch(`https://api.github.com/users/${username}`) + .then((res) => res.json()) + .then((user) => { + if (!user || user.message === "Not Found") { + console.warn(`User ${username} not found.`); + return; + } + + fetch(user.repos_url) + .then((res) => res.json()) + .then((repos) => { + if (!Array.isArray(repos)) { + console.warn( + `Repo data for ${username} is not an array:`, + repos, + ); + return; + } + + const langCount = {}; + repos.forEach((repo) => { + if (repo.language) { + langCount[repo.language] = + (langCount[repo.language] || 0) + 1; + } + }); + + const topLangs = + Object.entries(langCount) + .sort((a, b) => b[1] - a[1]) + .slice(0, 3) + .map((entry) => entry[0]) + .join(", ") || "N/A"; + + const card = document.createElement("div"); + card.className = "card"; + card.style.animationDelay = `${index * 0.1}s`; // staggered animation + + card.innerHTML = ` + ${user.login} +

${user.name || user.login}

+

@${user.login}

+

Top Languages: ${topLangs}

+ View GitHub + `; + grid.appendChild(card); + }) + .catch((err) => + console.error(`Error fetching repos for ${username}:`, err), + ); + }) + .catch((err) => + console.error(`Failed to load user data for ${username}:`, err), + ); + }); + }) + .catch((err) => console.error("Error loading contributors.json:", err)); + +// 🔍 Live Search +searchInput.addEventListener("input", (e) => { + const value = e.target.value.toLowerCase(); + Array.from(grid.children).forEach((card) => { + const username = card.querySelector("p").textContent.toLowerCase(); + card.style.display = username.includes(value) ? "block" : "none"; + }); +}); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..f329756 --- /dev/null +++ b/src/style.css @@ -0,0 +1,158 @@ +body { + background-color: #0f0f0f; + color: #00ff88; + font-family: 'Courier New', Courier, monospace; + padding: 20px; +} + +h1 { + font-size: 2rem; +} + +.cursor { + animation: blink 1s step-start infinite; +} + +@keyframes blink { + 50% { + opacity: 0; + } +} + +.sub { + font-size: 1rem; + margin: 8px 0 20px 0; + color: #00cc66; +} + +#search { + width: 100%; + padding: 10px; + background-color: #1c1c1c; + border: 1px solid #00ff88; + color: #00ff88; + margin-bottom: 20px; + border-radius: 5px; +} + +.grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 20px; +} + +/* 🔥 Updated Card Styling */ +.card { + background-color: #1a1a1a; + border: 1px solid #00ff88; + padding: 15px; + border-radius: 8px; + text-align: center; + transition: transform 0.3s ease, box-shadow 0.3s ease; + position: relative; + overflow: hidden; + + /* Fade-in effect */ + opacity: 0; + transform: translateY(10px); + animation: fadeUp 0.6s ease forwards; +} + +@keyframes fadeUp { + to { + opacity: 1; + transform: translateY(0); + } +} + +/* 🔁 Hover Effects */ +.card::before { + content: ''; + position: absolute; + top: -50%; + left: -50%; + width: 200%; + height: 200%; + background: radial-gradient(circle, rgba(0, 255, 170, 0.2) 0%, transparent 60%); + transform: rotate(25deg); + opacity: 0; + transition: opacity 0.4s ease; +} + +.card:hover::before { + opacity: 1; +} + +.card:hover { + transform: scale(1.05); + border-color: #00ffaa; + box-shadow: 0 0 20px rgba(0, 255, 170, 0.3); +} + +.card img { + width: 80px; + height: 80px; + border-radius: 50%; + margin-bottom: 10px; + border: 2px solid #00ff88; +} + +.card h3 { + margin: 5px 0; + color: #ffffff; +} + +.card p { + font-size: 0.85rem; + margin: 3px 0; +} + +.card a { + text-decoration: none; + color: #00ffaa; + font-weight: bold; +} + +footer { + margin-top: 40px; + text-align: center; + font-size: 0.8rem; + color: #00cc66; +} + +@keyframes glitch { + 0% { + transform: translate(0); + } + + 20% { + transform: translate(-2px, 2px); + } + + 40% { + transform: translate(2px, -2px); + } + + 60% { + transform: translate(-1px, 1px); + } + + 80% { + transform: translate(1px, -1px); + } + + 100% { + transform: translate(0); + } +} + +.card:hover { + transform: scale(1.03); + border-color: #00ffaa; + box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33; + animation: glitch 0.3s steps(2, end) infinite; +} + +.card h3:hover { + animation: glitch 0.3s steps(2, end) infinite; +} \ No newline at end of file diff --git a/style.css b/style.css deleted file mode 100644 index c8a4d25..0000000 --- a/style.css +++ /dev/null @@ -1,85 +0,0 @@ -body { - background-color: #0f0f0f; - color: #00ff88; - font-family: 'Courier New', Courier, monospace; - padding: 20px; -} - -h1 { - font-size: 2rem; -} - -.cursor { - animation: blink 1s step-start infinite; -} - -@keyframes blink { - 50% { opacity: 0; } -} - -.sub { - font-size: 1rem; - margin: 8px 0 20px 0; - color: #00cc66; -} - -#search { - width: 100%; - padding: 10px; - background-color: #1c1c1c; - border: 1px solid #00ff88; - color: #00ff88; - margin-bottom: 20px; - border-radius: 5px; -} - -.grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); - gap: 20px; -} - -.card { - background-color: #1a1a1a; - border: 1px solid #00ff88; - padding: 15px; - border-radius: 8px; - text-align: center; - transition: transform 0.2s ease; -} - -.card:hover { - transform: scale(1.03); - border-color: #00ffaa; -} - -.card img { - width: 80px; - height: 80px; - border-radius: 50%; - margin-bottom: 10px; - border: 2px solid #00ff88; -} - -.card h3 { - margin: 5px 0; - color: #ffffff; -} - -.card p { - font-size: 0.85rem; - margin: 3px 0; -} - -.card a { - text-decoration: none; - color: #00ffaa; - font-weight: bold; -} - -footer { - margin-top: 40px; - text-align: center; - font-size: 0.8rem; - color: #00cc66; -} From df1206f9137b6caeff72e8e94f084bea0c848da4 Mon Sep 17 00:00:00 2001 From: Saurabh Date: Wed, 25 Jun 2025 09:41:51 +0000 Subject: [PATCH 2/2] feat: Add animated hover and glitch effects to contributor cards --- src/contributors.json => contributors.json | 0 src/index.html => index.html | 2 +- src/script.js => script.js | 22 ++++---- src/style.css => style.css | 59 +++++++--------------- 4 files changed, 30 insertions(+), 53 deletions(-) rename src/contributors.json => contributors.json (100%) rename src/index.html => index.html (86%) rename src/script.js => script.js (84%) rename src/style.css => style.css (81%) diff --git a/src/contributors.json b/contributors.json similarity index 100% rename from src/contributors.json rename to contributors.json diff --git a/src/index.html b/index.html similarity index 86% rename from src/index.html rename to index.html index bdf8dbc..5860af6 100644 --- a/src/index.html +++ b/index.html @@ -8,7 +8,7 @@
-

$ dev-scope█

+

$ dev-scope█

[ GitHub Contributors ]

diff --git a/src/script.js b/script.js similarity index 84% rename from src/script.js rename to script.js index f8bfc05..9c789b0 100644 --- a/src/script.js +++ b/script.js @@ -1,6 +1,7 @@ const grid = document.getElementById("devGrid"); const searchInput = document.getElementById("search"); +// Fetch contributors list fetch("../contributors.json") .then((res) => res.json()) .then((usernames) => { @@ -13,22 +14,19 @@ fetch("../contributors.json") return; } + // Fetch user repos to determine top languages fetch(user.repos_url) .then((res) => res.json()) .then((repos) => { if (!Array.isArray(repos)) { - console.warn( - `Repo data for ${username} is not an array:`, - repos, - ); + console.warn(`Repo data for ${username} is not an array:`, repos); return; } const langCount = {}; repos.forEach((repo) => { if (repo.language) { - langCount[repo.language] = - (langCount[repo.language] || 0) + 1; + langCount[repo.language] = (langCount[repo.language] || 0) + 1; } }); @@ -36,12 +34,13 @@ fetch("../contributors.json") Object.entries(langCount) .sort((a, b) => b[1] - a[1]) .slice(0, 3) - .map((entry) => entry[0]) + .map(([lang]) => lang) .join(", ") || "N/A"; + // Create user card const card = document.createElement("div"); card.className = "card"; - card.style.animationDelay = `${index * 0.1}s`; // staggered animation + card.style.animationDelay = `${index * 0.1}s`; // stagger effect for fade-up card.innerHTML = ` ${user.login} @@ -50,20 +49,21 @@ fetch("../contributors.json")

Top Languages: ${topLangs}

View GitHub `; + grid.appendChild(card); }) .catch((err) => - console.error(`Error fetching repos for ${username}:`, err), + console.error(`Error fetching repos for ${username}:`, err) ); }) .catch((err) => - console.error(`Failed to load user data for ${username}:`, err), + console.error(`Failed to load user data for ${username}:`, err) ); }); }) .catch((err) => console.error("Error loading contributors.json:", err)); -// 🔍 Live Search +// 🔍 Live Search Filtering searchInput.addEventListener("input", (e) => { const value = e.target.value.toLowerCase(); Array.from(grid.children).forEach((card) => { diff --git a/src/style.css b/style.css similarity index 81% rename from src/style.css rename to style.css index f329756..0d67384 100644 --- a/src/style.css +++ b/style.css @@ -41,7 +41,7 @@ h1 { gap: 20px; } -/* 🔥 Updated Card Styling */ +/* 🔥 Animated Cards */ .card { background-color: #1a1a1a; border: 1px solid #00ff88; @@ -65,7 +65,16 @@ h1 { } } -/* 🔁 Hover Effects */ +/* 💥 Glitch on hover */ +@keyframes glitch { + 0% { transform: translate(0); } + 20% { transform: translate(-2px, 2px); } + 40% { transform: translate(2px, -2px); } + 60% { transform: translate(-1px, 1px); } + 80% { transform: translate(1px, -1px); } + 100% { transform: translate(0); } +} + .card::before { content: ''; position: absolute; @@ -84,9 +93,14 @@ h1 { } .card:hover { - transform: scale(1.05); + transform: scale(1.03); border-color: #00ffaa; - box-shadow: 0 0 20px rgba(0, 255, 170, 0.3); + box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33; + animation: glitch 0.3s steps(2, end) infinite; +} + +.card h3:hover { + animation: glitch 0.3s steps(2, end) infinite; } .card img { @@ -119,40 +133,3 @@ footer { font-size: 0.8rem; color: #00cc66; } - -@keyframes glitch { - 0% { - transform: translate(0); - } - - 20% { - transform: translate(-2px, 2px); - } - - 40% { - transform: translate(2px, -2px); - } - - 60% { - transform: translate(-1px, 1px); - } - - 80% { - transform: translate(1px, -1px); - } - - 100% { - transform: translate(0); - } -} - -.card:hover { - transform: scale(1.03); - border-color: #00ffaa; - box-shadow: 0 0 10px #00ffaa, 0 0 20px #00ffaa33; - animation: glitch 0.3s steps(2, end) infinite; -} - -.card h3:hover { - animation: glitch 0.3s steps(2, end) infinite; -} \ No newline at end of file