From e6203d919aa1c3ce9b16ae9f71d7141c0fd12df9 Mon Sep 17 00:00:00 2001 From: Adhiraj Saha <93763060+adhirajcs@users.noreply.github.com> Date: Sat, 7 Dec 2024 16:09:36 +0000 Subject: [PATCH] Added linkedIn and Github buttons in hero section --- package-lock.json | 65 ++++++++++++++++++++++++++++++++++++----- package.json | 5 ++-- src/components/Hero.jsx | 28 ++++++++++++++++-- 3 files changed, 85 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9ebadff..66bb8e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "framer-motion": "^11.5.4", + "framer-motion": "^11.13.1", "lucide-react": "^0.439.0", "next": "14.2.8", "next-themes": "^0.3.0", @@ -22,9 +22,10 @@ "qss": "^3.0.0", "react": "^18", "react-dom": "^18", + "react-element-to-jsx-string": "^15.0.0", "react-icon-cloud": "^4.1.4", "react-icons": "^5.3.0", - "tailwind-merge": "^2.5.2", + "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { @@ -44,6 +45,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@base2/pretty-print-object": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz", + "integrity": "sha512-4iri8i1AqYHJE2DstZYkyEprg6Pq6sKx3xn5FpySk9sNhH7qN2LLlHJCfDTZRILNwQNPD7mATWM0TBui7uC1pA==", + "license": "BSD-2-Clause" + }, "node_modules/@csstools/convert-colors": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-2.0.0.tgz", @@ -1177,11 +1184,13 @@ } }, "node_modules/framer-motion": { - "version": "11.5.4", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.4.tgz", - "integrity": "sha512-E+tb3/G6SO69POkdJT+3EpdMuhmtCh9EWuK4I1DnIC23L7tFPrl8vxP+LSovwaw6uUr73rUbpb4FgK011wbRJQ==", + "version": "11.13.1", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.13.1.tgz", + "integrity": "sha512-F40tpGTHByhn9h3zdBQPcEro+pSLtzARcocbNqAyfBI+u9S+KZuHH/7O9+z+GEkoF3eqFxfvVw0eBDytohwqmQ==", "license": "MIT", "dependencies": { + "motion-dom": "^11.13.0", + "motion-utils": "^11.13.0", "tslib": "^2.4.0" }, "peerDependencies": { @@ -1340,6 +1349,15 @@ "node": ">=0.12.0" } }, + "node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -1485,6 +1503,16 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/motion-dom": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.13.0.tgz", + "integrity": "sha512-Oc1MLGJQ6nrvXccXA89lXtOqFyBmvHtaDcTRGT66o8Czl7nuA8BeHAd9MQV1pQKX0d2RHFBFaw5g3k23hQJt0w==" + }, + "node_modules/motion-utils": { + "version": "11.13.0", + "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-11.13.0.tgz", + "integrity": "sha512-lq6TzXkH5c/ysJQBxgLXgM01qwBH1b4goTPh57VvZWJbVJZF/0SB31UWEn4EIqbVPf3au88n2rvK17SpDTja1A==" + }, "node_modules/mz": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", @@ -1926,6 +1954,21 @@ "react": "^18.3.1" } }, + "node_modules/react-element-to-jsx-string": { + "version": "15.0.0", + "resolved": "https://registry.npmjs.org/react-element-to-jsx-string/-/react-element-to-jsx-string-15.0.0.tgz", + "integrity": "sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==", + "license": "MIT", + "dependencies": { + "@base2/pretty-print-object": "1.0.1", + "is-plain-object": "5.0.0", + "react-is": "18.1.0" + }, + "peerDependencies": { + "react": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0", + "react-dom": "^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0" + } + }, "node_modules/react-icon-cloud": { "version": "4.1.4", "resolved": "https://registry.npmjs.org/react-icon-cloud/-/react-icon-cloud-4.1.4.tgz", @@ -1950,6 +1993,12 @@ "react": "*" } }, + "node_modules/react-is": { + "version": "18.1.0", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.1.0.tgz", + "integrity": "sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==", + "license": "MIT" + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -2234,9 +2283,9 @@ } }, "node_modules/tailwind-merge": { - "version": "2.5.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.2.tgz", - "integrity": "sha512-kjEBm+pvD+6eAwzJL2Bi+02/9LFLal1Gs61+QB7HvTfQQ0aXwC5LGT8PEt1gS0CWKktKe6ysPTAy3cBC5MeiIg==", + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz", + "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==", "license": "MIT", "funding": { "type": "github", diff --git a/package.json b/package.json index 22e6ee3..b7e92eb 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "axios": "^1.7.7", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", - "framer-motion": "^11.5.4", + "framer-motion": "^11.13.1", "lucide-react": "^0.439.0", "next": "14.2.8", "next-themes": "^0.3.0", @@ -23,9 +23,10 @@ "qss": "^3.0.0", "react": "^18", "react-dom": "^18", + "react-element-to-jsx-string": "^15.0.0", "react-icon-cloud": "^4.1.4", "react-icons": "^5.3.0", - "tailwind-merge": "^2.5.2", + "tailwind-merge": "^2.5.5", "tailwindcss-animate": "^1.0.7" }, "devDependencies": { diff --git a/src/components/Hero.jsx b/src/components/Hero.jsx index 6ab74f8..7cc81a3 100644 --- a/src/components/Hero.jsx +++ b/src/components/Hero.jsx @@ -6,6 +6,8 @@ import { GlareCard } from "@/components/ui/glare-card"; import { EncryptButton } from "@/components/ui/EncryptButton"; import { Playpen_Sans, Comfortaa } from "next/font/google"; +import { SiGithub, SiLinkedin } from "react-icons/si"; + // Import the fonts using next/font/google const words1Font = Playpen_Sans({ @@ -32,7 +34,7 @@ const Hero = () => { }, ]; - const words2 = `An Aspiring Software Developer with skills in ReactJS, Next.js, Python, and Django.`; + const words2 = `An Aspiring Software Developer with skills in Python, Django, React, Next.js and PostgreSQL.`; return (
{
- {/* Cool Mode Button */} -
+
+ {/* Cool Mode Button */} + + {/* Linkedin Button */} + + + + + {/* Github Button */} + + +
);