From bb92d6a8752e3049b346818fad1ef2ca01f00884 Mon Sep 17 00:00:00 2001 From: Aditya Ranjan Date: Mon, 25 Dec 2023 19:04:23 +0530 Subject: [PATCH 1/2] Added Christmas Theme --- assets/christmas_theme/ParticlesBg.js | 15 + assets/christmas_theme/config.js | 488 ++++++++++++++++++++++++++ components/navbar/Navbar.js | 2 +- components/screen/Screen.js | 2 + package.json | 4 +- yarn.lock | 353 +++++++++++++++++++ 6 files changed, 862 insertions(+), 2 deletions(-) create mode 100644 assets/christmas_theme/ParticlesBg.js create mode 100644 assets/christmas_theme/config.js diff --git a/assets/christmas_theme/ParticlesBg.js b/assets/christmas_theme/ParticlesBg.js new file mode 100644 index 0000000..a0e1caf --- /dev/null +++ b/assets/christmas_theme/ParticlesBg.js @@ -0,0 +1,15 @@ +import Particles from 'react-tsparticles'; +import { loadFull } from 'tsparticles'; +import particleConfig from './config'; + +function ParticleBackground() { + const Particlesinit = async (main) => { + await loadFull(main); + }; + return ( +
+ +
+ ); +} +export default ParticleBackground; diff --git a/assets/christmas_theme/config.js b/assets/christmas_theme/config.js new file mode 100644 index 0000000..3db6aae --- /dev/null +++ b/assets/christmas_theme/config.js @@ -0,0 +1,488 @@ +const particleConfig = { + autoPlay: true, + background: { + color: { + value: "transparent", + }, + image: "", + position: "", + repeat: "", + size: "", + opacity: 1, + }, + backgroundMask: { + composite: "destination-out", + cover: { + color: { + value: "#fff", + }, + opacity: 1, + }, + enable: false, + }, + clear: true, + defaultThemes: {}, + delay: 0, + fullScreen: { + enable: true, + zIndex: -1, + }, + detectRetina: false, + duration: 0, + fpsLimit: 180, + 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, + }, + 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", + }, + slow: { + factor: 3, + radius: 200, + }, + 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: 800, + }, + 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, + name: "Snow", + motion: { + disable: false, + reduce: { + factor: 4, + value: true, + }, + }, + } + + export default particleConfig; \ No newline at end of file diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js index 64735c8..a512ed3 100644 --- a/components/navbar/Navbar.js +++ b/components/navbar/Navbar.js @@ -4,7 +4,7 @@ import { HiMenuAlt4 } from 'react-icons/hi'; import Image from 'next/image'; import Link from 'next/link'; import styles from './Navbar.module.css'; -import Logo from '../../assets/hncc-logo.png'; +import Logo from '../../assets/christmas_theme/christmas-theme-logo.png'; import Button from '../button/Button'; import Sidebar from './Sidebar'; diff --git a/components/screen/Screen.js b/components/screen/Screen.js index 2ff767d..7d52f93 100644 --- a/components/screen/Screen.js +++ b/components/screen/Screen.js @@ -1,4 +1,5 @@ import { useEffect } from 'react'; +import ParticleBackground from '../../assets/christmas_theme/ParticlesBg'; import Footer from '../footer/Footer'; import Navbar from '../navbar/Navbar'; import SocialsBar from '../socialsbar/SocialsBar'; @@ -21,6 +22,7 @@ function Screen({ children }) { return (
+ {children} diff --git a/package.json b/package.json index 3425aa6..0e6b14a 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,9 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-icons": "^4.3.1", - "sharp": "^0.30.1" + "react-tsparticles": "2.12.2", + "sharp": "^0.30.1", + "tsparticles": "2.0.6" }, "devDependencies": { "@babel/core": "^7.16.12", diff --git a/yarn.lock b/yarn.lock index 6f3b2fb..e92ff23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2292,6 +2292,13 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-tsparticles@2.12.2: + version "2.12.2" + resolved "https://registry.yarnpkg.com/react-tsparticles/-/react-tsparticles-2.12.2.tgz#679054f229650db8398a646e2bb1c4a750f2a7de" + integrity sha512-/nrEbyL8UROXKIMXe+f+LZN2ckvkwV2Qa+GGe/H26oEIc+wq/ybSG9REDwQiSt2OaDQGu0MwmA4BKmkL6wAWcA== + dependencies: + tsparticles-engine "^2.12.0" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -2750,6 +2757,352 @@ tsconfig-paths@^3.12.0: minimist "^1.2.0" strip-bom "^3.0.0" +tsparticles-basic@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-basic/-/tsparticles-basic-2.12.0.tgz#39fd8cc31cf625b8c7c9dc517c4cb9943cafa5f4" + integrity sha512-pN6FBpL0UsIUXjYbiui5+IVsbIItbQGOlwyGV55g6IYJBgdTNXgFX0HRYZGE9ZZ9psEXqzqwLM37zvWnb5AG9g== + dependencies: + tsparticles-engine "^2.12.0" + tsparticles-move-base "^2.12.0" + tsparticles-shape-circle "^2.12.0" + tsparticles-updater-color "^2.12.0" + tsparticles-updater-opacity "^2.12.0" + tsparticles-updater-out-modes "^2.12.0" + tsparticles-updater-size "^2.12.0" + +tsparticles-engine@^2.0.6, tsparticles-engine@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-engine/-/tsparticles-engine-2.12.0.tgz#4a52a8de4ab6085180abf27f4720f47caa1455fc" + integrity sha512-ZjDIYex6jBJ4iMc9+z0uPe7SgBnmb6l+EJm83MPIsOny9lPpetMsnw/8YJ3xdxn8hV+S3myTpTN1CkOVmFv0QQ== + +tsparticles-interaction-external-attract@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-attract/-/tsparticles-interaction-external-attract-2.12.0.tgz#a223178431a76366dd25a2b25cde269585b716c7" + integrity sha512-0roC6D1QkFqMVomcMlTaBrNVjVOpyNzxIUsjMfshk2wUZDAvTNTuWQdUpmsLS4EeSTDN3rzlGNnIuuUQqyBU5w== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-bounce@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bounce/-/tsparticles-interaction-external-bounce-2.12.0.tgz#171931e4fd98e0655dc031c7dfda973b90e821a9" + integrity sha512-MMcqKLnQMJ30hubORtdq+4QMldQ3+gJu0bBYsQr9BsThsh8/V0xHc1iokZobqHYVP5tV77mbFBD8Z7iSCf0TMQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-bubble@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-bubble/-/tsparticles-interaction-external-bubble-2.12.0.tgz#a9854fc92ad63e9f4b6c3704866095303b07c4c9" + integrity sha512-5kImCSCZlLNccXOHPIi2Yn+rQWTX3sEa/xCHwXW19uHxtILVJlnAweayc8+Zgmb7mo0DscBtWVFXHPxrVPFDUA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-connect@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-connect/-/tsparticles-interaction-external-connect-2.12.0.tgz#15beef5215bd084daa24b0000387de3937d000a2" + integrity sha512-ymzmFPXz6AaA1LAOL5Ihuy7YSQEW8MzuSJzbd0ES13U8XjiU3HlFqlH6WGT1KvXNw6WYoqrZt0T3fKxBW3/C3A== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-grab@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-grab/-/tsparticles-interaction-external-grab-2.12.0.tgz#f338a831f05ff275683939cec32efe790aff69e2" + integrity sha512-iQF/A947hSfDNqAjr49PRjyQaeRkYgTYpfNmAf+EfME8RsbapeP/BSyF6mTy0UAFC0hK2A2Hwgw72eT78yhXeQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-pause@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-pause/-/tsparticles-interaction-external-pause-2.12.0.tgz#8984dfc20d895ae30b8163cfc1901fff6e8e27d7" + integrity sha512-4SUikNpsFROHnRqniL+uX2E388YTtfRWqqqZxRhY0BrijH4z04Aii3YqaGhJxfrwDKkTQlIoM2GbFT552QZWjw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-push@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-push/-/tsparticles-interaction-external-push-2.12.0.tgz#f3c4a18cebcfdce5cfa4febef3f7adbea458f41e" + integrity sha512-kqs3V0dgDKgMoeqbdg+cKH2F+DTrvfCMrPF1MCCUpBCqBiH+TRQpJNNC86EZYHfNUeeLuIM3ttWwIkk2hllR/Q== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-remove@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-remove/-/tsparticles-interaction-external-remove-2.12.0.tgz#1820f7e420bc0fe6c14d95b72c8122e838c1017c" + integrity sha512-2eNIrv4m1WB2VfSVj46V2L/J9hNEZnMgFc+A+qmy66C8KzDN1G8aJUAf1inW8JVc0lmo5+WKhzex4X0ZSMghBg== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-repulse@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-repulse/-/tsparticles-interaction-external-repulse-2.12.0.tgz#373a839fe517465d2b308baabf0324fce6e5eaff" + integrity sha512-rSzdnmgljeBCj5FPp4AtGxOG9TmTsK3AjQW0vlyd1aG2O5kSqFjR+FuT7rfdSk9LEJGH5SjPFE6cwbuy51uEWA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-slow@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-slow/-/tsparticles-interaction-external-slow-2.12.0.tgz#e9b50b276b848b9b59bf14ac675a519afa5fe81e" + integrity sha512-2IKdMC3om7DttqyroMtO//xNdF0NvJL/Lx7LDo08VpfTgJJozxU+JAUT8XVT7urxhaDzbxSSIROc79epESROtA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-external-trail@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-external-trail/-/tsparticles-interaction-external-trail-2.12.0.tgz#f199d8e0de78522c3e6d3b119c010eb04c0f9138" + integrity sha512-LKSapU5sPTaZqYx+y5VJClj0prlV7bswplSFQaIW1raXkvsk45qir2AVcpP5JUhZSFSG+SwsHr+qCgXhNeN1KA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-particles-attract@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-attract/-/tsparticles-interaction-particles-attract-2.12.0.tgz#ab784d2de5f1bad7c6ebf859a8ccf962b8233fd4" + integrity sha512-Hl8qwuwF9aLq3FOkAW+Zomu7Gb8IKs6Y3tFQUQScDmrrSCaeRt2EGklAiwgxwgntmqzL7hbMWNx06CHHcUQKdQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-particles-collisions@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-collisions/-/tsparticles-interaction-particles-collisions-2.12.0.tgz#4261133737279ca46e682a270d6213e3cd97d8be" + integrity sha512-Se9nPWlyPxdsnHgR6ap4YUImAu3W5MeGKJaQMiQpm1vW8lSMOUejI1n1ioIaQth9weKGKnD9rvcNn76sFlzGBA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-interaction-particles-links@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-interaction-particles-links/-/tsparticles-interaction-particles-links-2.12.0.tgz#2716106bf9f29ef3bb64600c6b56ec895553d2b1" + integrity sha512-e7I8gRs4rmKfcsHONXMkJnymRWpxHmeaJIo4g2NaDRjIgeb2AcJSWKWZvrsoLnm7zvaf/cMQlbN6vQwCixYq3A== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-move-base@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-move-base/-/tsparticles-move-base-2.12.0.tgz#22a0bf5c5a6a21db868c31d3172c1434e3e9e45a" + integrity sha512-oSogCDougIImq+iRtIFJD0YFArlorSi8IW3HD2gO3USkH+aNn3ZqZNTqp321uB08K34HpS263DTbhLHa/D6BWw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-move-parallax@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-move-parallax/-/tsparticles-move-parallax-2.12.0.tgz#67f6bbb00c61a003056acc77c0c4d0245a519763" + integrity sha512-58CYXaX8Ih5rNtYhpnH0YwU4Ks7gVZMREGUJtmjhuYN+OFr9FVdF3oDIJ9N6gY5a5AnAKz8f5j5qpucoPRcYrQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-particles.js@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-particles.js/-/tsparticles-particles.js-2.12.0.tgz#f9cb0326e083c8abe19e9d0a8ea6bcd0ce728447" + integrity sha512-LyOuvYdhbUScmA4iDgV3LxA0HzY1DnOwQUy3NrPYO393S2YwdDjdwMod6Btq7EBUjg9FVIh+sZRizgV5elV2dg== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-plugin-absorbers@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-plugin-absorbers/-/tsparticles-plugin-absorbers-2.12.0.tgz#911467e579ea5578b09bf4e5e44e2b3ef5ae308d" + integrity sha512-2CkPreaXHrE5VzFlxUKLeRB5t66ff+3jwLJoDFgQcp+R4HOEITo0bBZv2DagGP0QZdYN4grpnQzRBVdB4d1rWA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-plugin-easing-quad@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-plugin-easing-quad/-/tsparticles-plugin-easing-quad-2.12.0.tgz#8dccb2a7abb0cc4d5ab76c6bdecc267d77bb2dab" + integrity sha512-2mNqez5pydDewMIUWaUhY5cNQ80IUOYiujwG6qx9spTq1D6EEPLbRNAEL8/ecPdn2j1Um3iWSx6lo340rPkv4Q== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-plugin-emitters@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-plugin-emitters/-/tsparticles-plugin-emitters-2.12.0.tgz#625cf9ad946e9ba39afcb3320554726c90c6d15b" + integrity sha512-fbskYnaXWXivBh9KFReVCfqHdhbNQSK2T+fq2qcGEWpwtDdgujcaS1k2Q/xjZnWNMfVesik4IrqspcL51gNdSA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-plugin-polygon-mask@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-plugin-polygon-mask/-/tsparticles-plugin-polygon-mask-2.12.0.tgz#1c3cd4b1552fa10e340aa8c071b3a7da22ec8da5" + integrity sha512-6oUyDD5xRlr2D5qMv8QCspKVoYkTAxLrmAuzx+VUGJt9BPz/Bza15Uy3F17k0vCbJLbObXVaDt/O7Mabt5yQBw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-circle@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-circle/-/tsparticles-shape-circle-2.12.0.tgz#52757d222145c3f80b02d3c51e6158aee0af024c" + integrity sha512-L6OngbAlbadG7b783x16ns3+SZ7i0SSB66M8xGa5/k+YcY7zm8zG0uPt1Hd+xQDR2aNA3RngVM10O23/Lwk65Q== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-image@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-image/-/tsparticles-shape-image-2.12.0.tgz#02273740d754a872f77434af8d57b5486b920c91" + integrity sha512-iCkSdUVa40DxhkkYjYuYHr9MJGVw+QnQuN5UC+e/yBgJQY+1tQL8UH0+YU/h0GHTzh5Sm+y+g51gOFxHt1dj7Q== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-line@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-line/-/tsparticles-shape-line-2.12.0.tgz#f4af1820eade84021f33d1c949a26dc791424d8b" + integrity sha512-RcpKmmpKlk+R8mM5wA2v64Lv1jvXtU4SrBDv3vbdRodKbKaWGGzymzav1Q0hYyDyUZgplEK/a5ZwrfrOwmgYGA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-polygon@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-polygon/-/tsparticles-shape-polygon-2.12.0.tgz#ab01b27f7c97f5fc1843ac0eef91e8dfa79bb3a2" + integrity sha512-5YEy7HVMt1Obxd/jnlsjajchAlYMr9eRZWN+lSjcFSH6Ibra7h59YuJVnwxOxAobpijGxsNiBX0PuGQnB47pmA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-square@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-square/-/tsparticles-shape-square-2.12.0.tgz#53916baea090a6af1863cb8ec5f77bf0e993ef2a" + integrity sha512-33vfajHqmlODKaUzyPI/aVhnAOT09V7nfEPNl8DD0cfiNikEuPkbFqgJezJuE55ebtVo7BZPDA9o7GYbWxQNuw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-star@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-star/-/tsparticles-shape-star-2.12.0.tgz#609f9eb7025ad30931ee115b17cee4cf5b91a13e" + integrity sha512-4sfG/BBqm2qBnPLASl2L5aBfCx86cmZLXeh49Un+TIR1F5Qh4XUFsahgVOG0vkZQa+rOsZPEH04xY5feWmj90g== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-shape-text@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-shape-text/-/tsparticles-shape-text-2.12.0.tgz#1edc78c174210be4152a095a21136fc420d125d5" + integrity sha512-v2/FCA+hyTbDqp2ymFOe97h/NFb2eezECMrdirHWew3E3qlvj9S/xBibjbpZva2gnXcasBwxn0+LxKbgGdP0rA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-slim@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-slim/-/tsparticles-slim-2.12.0.tgz#21b9474e358830d9eb8ec38a47c32d71b7ec7f02" + integrity sha512-27w9aGAAAPKHvP4LHzWFpyqu7wKyulayyaZ/L6Tuuejy4KP4BBEB4rY5GG91yvAPsLtr6rwWAn3yS+uxnBDpkA== + dependencies: + tsparticles-basic "^2.12.0" + tsparticles-engine "^2.12.0" + tsparticles-interaction-external-attract "^2.12.0" + tsparticles-interaction-external-bounce "^2.12.0" + tsparticles-interaction-external-bubble "^2.12.0" + tsparticles-interaction-external-connect "^2.12.0" + tsparticles-interaction-external-grab "^2.12.0" + tsparticles-interaction-external-pause "^2.12.0" + tsparticles-interaction-external-push "^2.12.0" + tsparticles-interaction-external-remove "^2.12.0" + tsparticles-interaction-external-repulse "^2.12.0" + tsparticles-interaction-external-slow "^2.12.0" + tsparticles-interaction-particles-attract "^2.12.0" + tsparticles-interaction-particles-collisions "^2.12.0" + tsparticles-interaction-particles-links "^2.12.0" + tsparticles-move-base "^2.12.0" + tsparticles-move-parallax "^2.12.0" + tsparticles-particles.js "^2.12.0" + tsparticles-plugin-easing-quad "^2.12.0" + tsparticles-shape-circle "^2.12.0" + tsparticles-shape-image "^2.12.0" + tsparticles-shape-line "^2.12.0" + tsparticles-shape-polygon "^2.12.0" + tsparticles-shape-square "^2.12.0" + tsparticles-shape-star "^2.12.0" + tsparticles-shape-text "^2.12.0" + tsparticles-updater-color "^2.12.0" + tsparticles-updater-life "^2.12.0" + tsparticles-updater-opacity "^2.12.0" + tsparticles-updater-out-modes "^2.12.0" + tsparticles-updater-rotate "^2.12.0" + tsparticles-updater-size "^2.12.0" + tsparticles-updater-stroke-color "^2.12.0" + +tsparticles-updater-color@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-color/-/tsparticles-updater-color-2.12.0.tgz#56d2a45f42a1578fd3b75d91baa60f2744db26a4" + integrity sha512-KcG3a8zd0f8CTiOrylXGChBrjhKcchvDJjx9sp5qpwQK61JlNojNCU35xoaSk2eEHeOvFjh0o3CXWUmYPUcBTQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-life@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-life/-/tsparticles-updater-life-2.12.0.tgz#00e9929b6011821bdf2b37f27d211fdaf74e32d8" + integrity sha512-J7RWGHAZkowBHpcLpmjKsxwnZZJ94oGEL2w+wvW1/+ZLmAiFFF6UgU0rHMC5CbHJT4IPx9cbkYMEHsBkcRJ0Bw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-opacity@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-opacity/-/tsparticles-updater-opacity-2.12.0.tgz#4e822dc43d80a3964e09056ff773214b619b18fc" + integrity sha512-YUjMsgHdaYi4HN89LLogboYcCi1o9VGo21upoqxq19yRy0hRCtx2NhH22iHF/i5WrX6jqshN0iuiiNefC53CsA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-out-modes@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-out-modes/-/tsparticles-updater-out-modes-2.12.0.tgz#14b47c5dc7b9f2a485c819f03634656466249e5e" + integrity sha512-owBp4Gk0JNlSrmp12XVEeBroDhLZU+Uq3szbWlHGSfcR88W4c/0bt0FiH5bHUqORIkw+m8O56hCjbqwj69kpOQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-roll@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-roll/-/tsparticles-updater-roll-2.12.0.tgz#a44eb602609749506146c832d0c41902ae9100a3" + integrity sha512-dxoxY5jP4C9x15BxlUv5/Q8OjUPBiE09ToXRyBxea9aEJ7/iMw6odvi1HuT0H1vTIfV7o1MYawjeCbMycvODKQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-rotate@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-rotate/-/tsparticles-updater-rotate-2.12.0.tgz#fa2a977fbdcb13cbe2fa9632d6ab8766e1f83167" + integrity sha512-waOFlGFmEZOzsQg4C4VSejNVXGf4dMf3fsnQrEROASGf1FCd8B6WcZau7JtXSTFw0OUGuk8UGz36ETWN72DkCw== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-size@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-size/-/tsparticles-updater-size-2.12.0.tgz#c9e80c7a91487f2b58d2db0acffbffee517d51d5" + integrity sha512-B0yRdEDd/qZXCGDL/ussHfx5YJ9UhTqNvmS5X2rR2hiZhBAE2fmsXLeWkdtF2QusjPeEqFDxrkGiLOsh6poqRA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-stroke-color@^2.12.0: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-stroke-color/-/tsparticles-updater-stroke-color-2.12.0.tgz#7bb7879eb8970b9525899cc9478840ae14675979" + integrity sha512-MPou1ZDxsuVq6SN1fbX+aI5yrs6FyP2iPCqqttpNbWyL+R6fik1rL0ab/x02B57liDXqGKYomIbBQVP3zUTW1A== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-tilt@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-tilt/-/tsparticles-updater-tilt-2.12.0.tgz#fea652a4bc783f3af4240d4f9b5508aebb6ecb30" + integrity sha512-HDEFLXazE+Zw+kkKKAiv0Fs9D9sRP61DoCR6jZ36ipea6OBgY7V1Tifz2TSR1zoQkk57ER9+EOQbkSQO+YIPGQ== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-twinkle@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-twinkle/-/tsparticles-updater-twinkle-2.12.0.tgz#5cd14424595f9772f685fe7e5a9e2a8a6603ddc6" + integrity sha512-JhK/DO4kTx7IFwMBP2EQY9hBaVVvFnGBvX21SQWcjkymmN1hZ+NdcgUtR9jr4jUiiSNdSl7INaBuGloVjWvOgA== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles-updater-wobble@^2.0.6: + version "2.12.0" + resolved "https://registry.yarnpkg.com/tsparticles-updater-wobble/-/tsparticles-updater-wobble-2.12.0.tgz#cd1e991629eec1db12fe963c7d9d2b6f9f4fb739" + integrity sha512-85FIRl95ipD3jfIsQdDzcUC5PRMWIrCYqBq69nIy9P8rsNzygn+JK2n+P1VQZowWsZvk0mYjqb9OVQB21Lhf6Q== + dependencies: + tsparticles-engine "^2.12.0" + +tsparticles@2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/tsparticles/-/tsparticles-2.0.6.tgz#e7780bb59c09ad28a42d2bb73b5c29e5947174e1" + integrity sha512-Q36YrIvDubgHJJsRYbRWlE05q1cpaLlc7L/Bi5VcfzkKVkdqSux0IMfulIMg13T32NN3Qc2jw3A8veMtIvOlCw== + dependencies: + tsparticles-engine "^2.0.6" + tsparticles-interaction-external-trail "^2.0.6" + tsparticles-plugin-absorbers "^2.0.6" + tsparticles-plugin-emitters "^2.0.6" + tsparticles-plugin-polygon-mask "^2.0.6" + tsparticles-slim "^2.0.6" + tsparticles-updater-roll "^2.0.6" + tsparticles-updater-tilt "^2.0.6" + tsparticles-updater-twinkle "^2.0.6" + tsparticles-updater-wobble "^2.0.6" + tunnel-agent@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd" From 281a76c5857c3f0c09a157c0e7f67167aae542d1 Mon Sep 17 00:00:00 2001 From: Aditya Ranjan Date: Tue, 26 Dec 2023 04:08:42 +0530 Subject: [PATCH 2/2] Fully Added Christmas & Golden Theme with Background Img --- assets/christmas_theme/config.js | 2 +- .../AnimatedScrollButton/index.module.css | 11 +++++++--- components/StyledText/Glitter.module.css | 4 +++- .../associations/association.module.css | 4 +++- components/button/Button.module.css | 12 +++++++++-- components/event/event.module.css | 12 ++++++++--- components/navbar/Hamburger.module.css | 4 +++- components/navbar/Navbar.js | 4 +++- components/navbar/Navbar.module.css | 5 ++++- components/navbar/Sidebar.js | 5 +++-- components/socialsbar/SocialsBar.module.css | 4 +++- components/sponsors/sponsors.module.css | 4 +++- components/teams/Team.module.css | 20 +++++++++++++++---- components/video/Video.module.css | 15 ++++++++++++++ pages/contact.js | 4 +++- styles/global.css | 4 +++- 16 files changed, 90 insertions(+), 24 deletions(-) diff --git a/assets/christmas_theme/config.js b/assets/christmas_theme/config.js index 3db6aae..d63387d 100644 --- a/assets/christmas_theme/config.js +++ b/assets/christmas_theme/config.js @@ -25,7 +25,7 @@ const particleConfig = { delay: 0, fullScreen: { enable: true, - zIndex: -1, + zIndex: 1, }, detectRetina: false, duration: 0, diff --git a/components/AnimatedScrollButton/index.module.css b/components/AnimatedScrollButton/index.module.css index dafcfa0..4914012 100644 --- a/components/AnimatedScrollButton/index.module.css +++ b/components/AnimatedScrollButton/index.module.css @@ -12,8 +12,11 @@ } .mouse:hover { - @apply border-blue; - box-shadow: 0px 0px 14px 1px rgb(36 172 255); + /* @apply border-blue; + box-shadow: 0px 0px 14px 1px rgb(36 172 255); */ + /* For Christmas theme */ + @apply border-golden; + box-shadow: 0px 0px 14px 1px #ffed79; } .cursor { @@ -27,7 +30,9 @@ } .mouse:hover .cursor { - @apply bg-blue; + /* @apply bg-blue; */ + /* For Christmas Theme */ + @apply bg-golden; animation: none; } diff --git a/components/StyledText/Glitter.module.css b/components/StyledText/Glitter.module.css index ef2fa97..ea2c430 100644 --- a/components/StyledText/Glitter.module.css +++ b/components/StyledText/Glitter.module.css @@ -15,7 +15,9 @@ position: absolute; bottom: 0; left: 0; - background: linear-gradient(to right, transparent, #24acff); + /* background: linear-gradient(to right, transparent, #24acff); */ + /* below background-color is for christmas theme */ + background: linear-gradient(to right, transparent, rgb(255, 237, 121)); height: 3px; width: 100%; animation: animate 2s linear infinite; diff --git a/components/associations/association.module.css b/components/associations/association.module.css index e7c9dc1..1af5a72 100644 --- a/components/associations/association.module.css +++ b/components/associations/association.module.css @@ -30,7 +30,9 @@ height: 130%; width: 130%; border-radius: 50%; - background: linear-gradient(90deg, #00ccff, #98e8fc); + /* background: linear-gradient(90deg, #00ccff, #98e8fc); */ + /* For Christmas Theme */ + background: linear-gradient(90deg, #ffa776, #ffed79); opacity: 0.25; } diff --git a/components/button/Button.module.css b/components/button/Button.module.css index b6d72ee..0172dc5 100644 --- a/components/button/Button.module.css +++ b/components/button/Button.module.css @@ -13,14 +13,22 @@ width: 0; height: 0; border-radius: 50%; - background: rgb(51, 121, 238); - background: radial-gradient(circle, rgba(51, 121, 238, 1) 0%, rgba(36, 172, 255, 1) 100%); + /* For Christmas Theme */ + background: #ffed79; + background: radial-gradient(circle, #ffa776 0%, #ffed79, 100%); + /* background: rgb(51, 121, 238); + background: radial-gradient(circle, rgba(51, 121, 238, 1) 0%, rgba(36, 172, 255, 1) 100%); */ transition: width 0.5s, height 0.5s; } .rippleButton:hover { border-color: transparent; } +/* Below span tag styling is For christmas Theme */ +.rippleButton:hover > span { + transition: 150ms; + @apply text-primary; +} .rippleButton:hover::before { height: 400px; diff --git a/components/event/event.module.css b/components/event/event.module.css index 5112c6b..607b2b8 100644 --- a/components/event/event.module.css +++ b/components/event/event.module.css @@ -16,7 +16,9 @@ transition: transform ease 250ms; border-radius: 0.5rem; overflow: hidden; - box-shadow: 0 0 5px 1px hsl(203, 100%, 57%); + /* box-shadow: 0 0 5px 1px hsl(203, 100%, 57%); */ + /* For Christmas Theme */ + box-shadow: 0 0 5px 1px #FFED79; } .card:hover { @@ -67,7 +69,9 @@ top: 100%; height: 3px; width: calc(100% + 2.5rem); - background: hsl(203, 100%, 57%); + /* For Christmas Theme */ + background: #FFED79; + /* background: hsl(203, 100%, 57%); */ transform: scaleX(0); transition: transform 200ms ease; transform-origin: left; @@ -87,7 +91,9 @@ display: inline-block; text-decoration: none; color: black; - background: hsl(203, 100%, 57%); + /* For Christmas Theme */ + background: #FFED79; + /* background: hsl(203, 100%, 57%); */ padding: 0.5em 1.25em; border-radius: 0.25rem; } diff --git a/components/navbar/Hamburger.module.css b/components/navbar/Hamburger.module.css index 293427a..0a2ad3b 100644 --- a/components/navbar/Hamburger.module.css +++ b/components/navbar/Hamburger.module.css @@ -42,7 +42,9 @@ } .navLink:hover { - @apply text-blue; + /* @apply text-blue; */ + /* For Christmas Theme */ + @apply text-golden; } .navLink:hover::after { diff --git a/components/navbar/Navbar.js b/components/navbar/Navbar.js index a512ed3..fde75d9 100644 --- a/components/navbar/Navbar.js +++ b/components/navbar/Navbar.js @@ -95,7 +95,9 @@ function Navbar() { > diff --git a/components/navbar/Navbar.module.css b/components/navbar/Navbar.module.css index 5b3abd8..083e910 100644 --- a/components/navbar/Navbar.module.css +++ b/components/navbar/Navbar.module.css @@ -27,7 +27,10 @@ width: fit-content; } .navbarList > .navLink:hover { - @apply text-blue font-medium; + /* @apply text-blue font-medium; */ + + /* For christmas theme */ + @apply text-golden font-medium; } .humburgerMenu { diff --git a/components/navbar/Sidebar.js b/components/navbar/Sidebar.js index 72a98fb..9616511 100644 --- a/components/navbar/Sidebar.js +++ b/components/navbar/Sidebar.js @@ -4,7 +4,7 @@ import { CgClose } from 'react-icons/cg'; import Image from 'next/image'; import Link from 'next/link'; import styles from './Hamburger.module.css'; -import Logo from '../../assets/hncc-logo.png'; +import Logo from '../../assets/christmas_theme/christmas-theme-logo.png'; import Button from '../button/Button'; const SpanStyle = { @@ -113,7 +113,8 @@ function Sidebar({ isMounted, unmount }) { > diff --git a/components/socialsbar/SocialsBar.module.css b/components/socialsbar/SocialsBar.module.css index 4eff55f..9a57df4 100644 --- a/components/socialsbar/SocialsBar.module.css +++ b/components/socialsbar/SocialsBar.module.css @@ -12,5 +12,7 @@ } .socialsBarIcons:hover { @apply text-blue-light; - fill: rgb(56, 200, 236) !important; + /* fill: rgb(56, 200, 236) !important; */ + /* For christmas theme */ + fill: rgb(255, 237, 121) !important; } diff --git a/components/sponsors/sponsors.module.css b/components/sponsors/sponsors.module.css index 1e77142..07fcd59 100644 --- a/components/sponsors/sponsors.module.css +++ b/components/sponsors/sponsors.module.css @@ -27,7 +27,9 @@ height: 160%; min-height: calc(100% + 50px); width: 50%; - background: linear-gradient(#00ccff, #98e8fc); + /* background: linear-gradient(#00ccff, #98e8fc); */ + /* Below is for christmas theme */ + background: linear-gradient(rgb(255, 237, 121), rgb(253, 244, 186)); animation: animate 4s linear infinite; opacity: 0.25; transition: all 400ms ease-in-out; diff --git a/components/teams/Team.module.css b/components/teams/Team.module.css index 0166811..d6572c5 100644 --- a/components/teams/Team.module.css +++ b/components/teams/Team.module.css @@ -1,12 +1,20 @@ .card { @apply p-4 relative flex flex-col justify-center items-center overflow-hidden rounded-2xl; min-height: 350px; - background: rgb(0, 204, 255); + /* background: rgb(0, 204, 255); */ + /* For christmas theme */ + background: rgb(255, 237, 121); + /* For Christmas theme */ background: linear-gradient( + 45deg, + rgba(255, 237, 121, 0.44861694677871145) 0%, + rgba(253, 244, 186, 0.4) 100% + ); + /* background: linear-gradient( 45deg, rgba(0, 204, 255, 0.44861694677871145) 0%, rgba(152, 232, 252, 0.4) 100% - ); + ); */ transition: all 300ms ease-in-out; } @@ -22,7 +30,9 @@ .card::before { @apply absolute w-32; content: ''; - background: linear-gradient(#00ccff, #98e8fc); + /* background: linear-gradient(#00ccff, #98e8fc); */ + /* For christmas theme */ + background: linear-gradient(#ffed79, #ffa776); animation: animate 4s linear infinite; height: 140%; opacity: 0; @@ -44,7 +54,9 @@ } .socials > a:hover > svg { - fill: #51bcff; + /* fill: #51bcff; */ + /* For Christmas theme */ + fill: rgb(255, 237, 121); } .postHead { diff --git a/components/video/Video.module.css b/components/video/Video.module.css index 4bc155e..5331a05 100644 --- a/components/video/Video.module.css +++ b/components/video/Video.module.css @@ -2,6 +2,17 @@ @apply relative; height: 90vh; @apply sm:h-auto; + /* Below styling is for christmas theme */ + background: url('../../assets/christmas_theme/background3.png'); + background-size: cover; +} + +.GRADIENT { + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) 90% + ); } .designVideoContainer { @@ -10,6 +21,10 @@ transition: all 400ms ease-in-out; height: 100%; overflow: hidden; + /* Below styling is for christmas theme */ + background: linear-gradient(90.28deg, #ffed79 1.18%, #ffa776 98.69%); + background-clip: text; + color: transparent; } .designVideoContainer > video { diff --git a/pages/contact.js b/pages/contact.js index b150a43..e9cebe6 100644 --- a/pages/contact.js +++ b/pages/contact.js @@ -97,7 +97,9 @@ function ContactUs() {