From 4033e04f26b4030dd059027d36f39685d4a543fe Mon Sep 17 00:00:00 2001 From: Sameer Date: Sat, 11 Jan 2025 15:37:31 +0530 Subject: [PATCH 1/2] test commit --- components/About.jsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/About.jsx b/components/About.jsx index 0a663f8..bfa9406 100644 --- a/components/About.jsx +++ b/components/About.jsx @@ -3,6 +3,7 @@ import React from 'react'; const About = () => { return (
+ hello
); }; From 350bf17b5e6e1c066be155a6d0c3091bfea49537 Mon Sep 17 00:00:00 2001 From: Sameer Date: Sat, 11 Jan 2025 20:50:49 +0530 Subject: [PATCH 2/2] About page completed --- components/About.jsx | 25 ++++- components/Animation/BackgroundBeams.jsx | 135 +++++++++++++++++++++++ package-lock.json | 43 ++++++-- package.json | 3 +- styles/globals.css | 1 + tailwind.config.mjs | 18 ++- 6 files changed, 210 insertions(+), 15 deletions(-) create mode 100644 components/Animation/BackgroundBeams.jsx diff --git a/components/About.jsx b/components/About.jsx index bfa9406..f1c53fc 100644 --- a/components/About.jsx +++ b/components/About.jsx @@ -1,10 +1,29 @@ import React from 'react'; +import { BackgroundBeams } from './Animation/BackgroundBeams.jsx'; const About = () => { return ( -
- hello -
+ <> +
+ +
+
+ +

ABOUT

+
+ +

ABOUT

+
+
+

Code Your Passion, Build Your Legacy.

+

+ “ Ossome Hacks 2.0 builds on the success of its inaugural edition in September 2023, which saw 250+ participants in 50+ teams solving real-world challenges. This 36-hour hackathon engages tech enthusiasts of all levels with diverse tracks, fostering innovation, skill-building, and collaboration. More than a competition, it celebrates + open-source development and empowers participants to make a meaningful impact.” +

+
+
+ ); }; + export default About; diff --git a/components/Animation/BackgroundBeams.jsx b/components/Animation/BackgroundBeams.jsx new file mode 100644 index 0000000..a5f10e1 --- /dev/null +++ b/components/Animation/BackgroundBeams.jsx @@ -0,0 +1,135 @@ +"use client"; +import React from "react"; +import { motion } from "framer-motion"; +import { cn } from "@/lib/utils"; + +export const BackgroundBeams = React.memo(({ + className +}) => { + const paths = [ + "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875", + "M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867", + "M-366 -205C-366 -205 -298 200 166 327C630 454 698 859 698 859", + "M-359 -213C-359 -213 -291 192 173 319C637 446 705 851 705 851", + "M-352 -221C-352 -221 -284 184 180 311C644 438 712 843 712 843", + "M-345 -229C-345 -229 -277 176 187 303C651 430 719 835 719 835", + "M-338 -237C-338 -237 -270 168 194 295C658 422 726 827 726 827", + "M-331 -245C-331 -245 -263 160 201 287C665 414 733 819 733 819", + "M-324 -253C-324 -253 -256 152 208 279C672 406 740 811 740 811", + "M-317 -261C-317 -261 -249 144 215 271C679 398 747 803 747 803", + "M-310 -269C-310 -269 -242 136 222 263C686 390 754 795 754 795", + "M-303 -277C-303 -277 -235 128 229 255C693 382 761 787 761 787", + "M-296 -285C-296 -285 -228 120 236 247C700 374 768 779 768 779", + "M-289 -293C-289 -293 -221 112 243 239C707 366 775 771 775 771", + "M-282 -301C-282 -301 -214 104 250 231C714 358 782 763 782 763", + "M-275 -309C-275 -309 -207 96 257 223C721 350 789 755 789 755", + "M-268 -317C-268 -317 -200 88 264 215C728 342 796 747 796 747", + "M-261 -325C-261 -325 -193 80 271 207C735 334 803 739 803 739", + "M-254 -333C-254 -333 -186 72 278 199C742 326 810 731 810 731", + "M-247 -341C-247 -341 -179 64 285 191C749 318 817 723 817 723", + "M-240 -349C-240 -349 -172 56 292 183C756 310 824 715 824 715", + "M-233 -357C-233 -357 -165 48 299 175C763 302 831 707 831 707", + "M-226 -365C-226 -365 -158 40 306 167C770 294 838 699 838 699", + "M-219 -373C-219 -373 -151 32 313 159C777 286 845 691 845 691", + "M-212 -381C-212 -381 -144 24 320 151C784 278 852 683 852 683", + "M-205 -389C-205 -389 -137 16 327 143C791 270 859 675 859 675", + "M-198 -397C-198 -397 -130 8 334 135C798 262 866 667 866 667", + "M-191 -405C-191 -405 -123 0 341 127C805 254 873 659 873 659", + "M-184 -413C-184 -413 -116 -8 348 119C812 246 880 651 880 651", + "M-177 -421C-177 -421 -109 -16 355 111C819 238 887 643 887 643", + "M-170 -429C-170 -429 -102 -24 362 103C826 230 894 635 894 635", + "M-163 -437C-163 -437 -95 -32 369 95C833 222 901 627 901 627", + "M-156 -445C-156 -445 -88 -40 376 87C840 214 908 619 908 619", + "M-149 -453C-149 -453 -81 -48 383 79C847 206 915 611 915 611", + "M-142 -461C-142 -461 -74 -56 390 71C854 198 922 603 922 603", + "M-135 -469C-135 -469 -67 -64 397 63C861 190 929 595 929 595", + "M-128 -477C-128 -477 -60 -72 404 55C868 182 936 587 936 587", + "M-121 -485C-121 -485 -53 -80 411 47C875 174 943 579 943 579", + "M-114 -493C-114 -493 -46 -88 418 39C882 166 950 571 950 571", + "M-107 -501C-107 -501 -39 -96 425 31C889 158 957 563 957 563", + "M-100 -509C-100 -509 -32 -104 432 23C896 150 964 555 964 555", + "M-93 -517C-93 -517 -25 -112 439 15C903 142 971 547 971 547", + "M-86 -525C-86 -525 -18 -120 446 7C910 134 978 539 978 539", + "M-79 -533C-79 -533 -11 -128 453 -1C917 126 985 531 985 531", + "M-72 -541C-72 -541 -4 -136 460 -9C924 118 992 523 992 523", + "M-65 -549C-65 -549 3 -144 467 -17C931 110 999 515 999 515", + "M-58 -557C-58 -557 10 -152 474 -25C938 102 1006 507 1006 507", + "M-51 -565C-51 -565 17 -160 481 -33C945 94 1013 499 1013 499", + "M-44 -573C-44 -573 24 -168 488 -41C952 86 1020 491 1020 491", + "M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483", + ]; + return ( + (
+ + + + {paths.map((path, index) => ( + + ))} + + {paths.map((path, index) => ( + + + + + + + ))} + + + + + + + + +
) + ); +}); + +BackgroundBeams.displayName = "BackgroundBeams"; diff --git a/package-lock.json b/package-lock.json index 606cd39..24ad65a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,8 +8,9 @@ "name": "ossomehacks2.0", "version": "0.1.0", "dependencies": { + "@tabler/icons-react": "^3.28.1", "clsx": "^2.1.1", - "framer-motion": "^11.16.0", + "framer-motion": "^11.17.0", "next": "15.1.3", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -904,6 +905,32 @@ "tslib": "^2.8.0" } }, + "node_modules/@tabler/icons": { + "version": "3.28.1", + "resolved": "https://registry.npmjs.org/@tabler/icons/-/icons-3.28.1.tgz", + "integrity": "sha512-h7nqKEvFooLtFxhMOC1/2eiV+KRXhBUuDUUJrJlt6Ft6tuMw2eU/9GLQgrTk41DNmIEzp/LI83K9J9UUU8YBYQ==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + } + }, + "node_modules/@tabler/icons-react": { + "version": "3.28.1", + "resolved": "https://registry.npmjs.org/@tabler/icons-react/-/icons-react-3.28.1.tgz", + "integrity": "sha512-KNBpA2kbxr3/2YK5swt7b/kd/xpDP1FHYZCxDFIw54tX8slELRFEf95VMxsccQHZeIcUbdoojmUUuYSbt/sM5Q==", + "license": "MIT", + "dependencies": { + "@tabler/icons": "3.28.1" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/codecalm" + }, + "peerDependencies": { + "react": ">= 16" + } + }, "node_modules/@types/estree": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", @@ -2775,12 +2802,12 @@ } }, "node_modules/framer-motion": { - "version": "11.16.0", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.16.0.tgz", - "integrity": "sha512-oL2AWqLQuw0+CNEUa0sz3mWC/n3i147CckvpQn8bLRs30b+HxTxlRi0YR2FpHHhAbWV7DKjNdHU42KHLfBWh/g==", + "version": "11.17.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.17.0.tgz", + "integrity": "sha512-uTNLH9JPMD3ad14WBt3KYRTR+If4tGPLgKTKTIIPaEBMkvazs6EkWNcmCh65qA/tyinOqIbQiuCorXX0qQsNoQ==", "license": "MIT", "dependencies": { - "motion-dom": "^11.16.0", + "motion-dom": "^11.16.4", "motion-utils": "^11.16.0", "tslib": "^2.4.0" }, @@ -3910,9 +3937,9 @@ } }, "node_modules/motion-dom": { - "version": "11.16.0", - "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.0.tgz", - "integrity": "sha512-4bmEwajSdrljzDAYpu6ceEdtI4J5PH25fmN8YSx7Qxk6OMrC10CXM0D5y+VO/pFZjhmCvm2bGf7Rus482kwhzA==", + "version": "11.16.4", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.16.4.tgz", + "integrity": "sha512-2wuCie206pCiP2K23uvwJeci4pMFfyQKpWI0Vy6HrCTDzDCer4TsYtT7IVnuGbDeoIV37UuZiUr6SZMHEc1Vww==", "license": "MIT", "dependencies": { "motion-utils": "^11.16.0" diff --git a/package.json b/package.json index fa646ea..1732f5c 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@tabler/icons-react": "^3.28.1", "clsx": "^2.1.1", - "framer-motion": "^11.16.0", + "framer-motion": "^11.17.0", "next": "15.1.3", "react": "^19.0.0", "react-dom": "^19.0.0", diff --git a/styles/globals.css b/styles/globals.css index c151f99..2e33517 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); +@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); @tailwind base; @tailwind components; @tailwind utilities; diff --git a/tailwind.config.mjs b/tailwind.config.mjs index b22ccec..b512c52 100644 --- a/tailwind.config.mjs +++ b/tailwind.config.mjs @@ -14,7 +14,8 @@ export default { extend: { fontFamily: { poppins: ['Poppins', 'sans-serif'], - dmSans: ['DM Sans', 'sans-serif'] + dmSans: ['DM Sans', 'sans-serif'], + raleway: ['Raleway', 'sans-serif'] }, colors: { bright_green: "#0DFF4E", @@ -23,5 +24,16 @@ export default { }, }, }, - plugins: [], -}; \ No newline at end of file + plugins: [addVariablesForColors], +}; + +function addVariablesForColors({ addBase, theme }) { + let allColors = flattenColorPalette(theme("colors")); + let newVars = Object.fromEntries( + Object.entries(allColors).map(([key, val]) => [`--${key}`, val]) + ); + + addBase({ + ":root": newVars, + }); +} \ No newline at end of file