diff --git a/package-lock.json b/package-lock.json index 2eb3aa5..b83f47b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,14 +16,17 @@ "clsx": "^1.2.1", "eslint": "8.44.0", "eslint-config-next": "13.4.9", + "framer-motion": "^11.0.8", "lucide-react": "^0.259.0", - "next": "13.4.9", + "next": "^13.4.9", "postcss": "8.4.25", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.45.1", + "react-hot-toast": "^2.4.1", + "react-spring": "^9.7.3", "resend": "^0.17.1", - "tailwind-merge": "^1.13.2", + "tailwind-merge": "^1.14.0", "tailwindcss": "3.3.2", "typescript": "5.1.6", "zod": "^3.21.4" @@ -62,6 +65,21 @@ "node": ">=6.9.0" } }, + "node_modules/@emotion/is-prop-valid": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz", + "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==", + "optional": true, + "dependencies": { + "@emotion/memoize": "0.7.4" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz", + "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==", + "optional": true + }, "node_modules/@eslint-community/eslint-utils": { "version": "4.4.0", "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz", @@ -445,6 +463,130 @@ "node": ">=16.0.0" } }, + "node_modules/@react-spring/animated": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz", + "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==", + "dependencies": { + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz", + "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/konva": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/konva/-/konva-9.7.3.tgz", + "integrity": "sha512-R9sY6SiPGYqz1383P5qppg5z57YfChVknOC1UxxaGxpw+WiZa8fZ4zmZobslrw+os3/+HAXZv8O+EvU/nQpf7g==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "konva": ">=2.6", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-konva": "^16.8.0 || ^16.8.7-0 || ^16.9.0-0 || ^16.10.1-0 || ^16.12.0-0 || ^16.13.0-0 || ^17.0.0-0 || ^17.0.1-0 || ^17.0.2-0 || ^18.0.0-0" + } + }, + "node_modules/@react-spring/native": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/native/-/native-9.7.3.tgz", + "integrity": "sha512-4mpxX3FuEBCUT6ae2fjhxcJW6bhr2FBwFf274eXB7n+U30Gdg8Wo2qYwcUnmiAA0S3dvP8vLTazx3+CYWFShnA==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || >=17.0.0 || >=18.0.0", + "react-native": ">=0.58" + } + }, + "node_modules/@react-spring/shared": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz", + "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==", + "dependencies": { + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/three": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.7.3.tgz", + "integrity": "sha512-Q1p512CqUlmMK8UMBF/Rj79qndhOWq4XUTayxMP9S892jiXzWQuj+xC3Xvm59DP/D4JXusXpxxqfgoH+hmOktA==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "@react-three/fiber": ">=6.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "three": ">=0.126" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz", + "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz", + "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/zdog": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/@react-spring/zdog/-/zdog-9.7.3.tgz", + "integrity": "sha512-L+yK/1PvNi9n8cldiJ309k4LdxcPkeWE0W18l1zrP1IBIyd5NB5EPA8DMsGr9gtNnnIujtEzZk+4JIOjT8u/tw==", + "dependencies": { + "@react-spring/animated": "~9.7.3", + "@react-spring/core": "~9.7.3", + "@react-spring/shared": "~9.7.3", + "@react-spring/types": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-zdog": ">=1.0", + "zdog": ">=1.0" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.3.2.tgz", @@ -2262,6 +2404,29 @@ "url": "https://www.patreon.com/infusion" } }, + "node_modules/framer-motion": { + "version": "11.0.8", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.8.tgz", + "integrity": "sha512-1KSGNuqe1qZkS/SWQlDnqK2VCVzRVEoval379j0FiUBJAZoqgwyvqFkfvJbgW2IPFo4wX16K+M0k5jO23lCIjA==", + "dependencies": { + "tslib": "^2.4.0" + }, + "optionalDependencies": { + "@emotion/is-prop-valid": "^0.8.2" + }, + "peerDependencies": { + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2456,6 +2621,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/goober": { + "version": "2.1.14", + "resolved": "https://registry.npmjs.org/goober/-/goober-2.1.14.tgz", + "integrity": "sha512-4UpC0NdGyAFqLNPnhCT2iHpza2q+RAY3GV85a/mRPdzyPQMsj0KmMMuetdIkzWRbJ+Hgau1EZztq8ImmiMGhsg==", + "peerDependencies": { + "csstype": "^3.0.10" + } + }, "node_modules/gopd": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz", @@ -3381,7 +3554,6 @@ "version": "13.4.9", "resolved": "https://registry.npmjs.org/next/-/next-13.4.9.tgz", "integrity": "sha512-vtefFm/BWIi/eWOqf1GsmKG3cjKw1k3LjuefKRcL3iiLl3zWzFdPG3as6xtxrGO6gwTzzaO1ktL4oiHt/uvTjA==", - "license": "MIT", "dependencies": { "@next/env": "13.4.9", "@swc/helpers": "0.5.1", @@ -4079,12 +4251,44 @@ "react": "^16.8.0 || ^17 || ^18" } }, + "node_modules/react-hot-toast": { + "version": "2.4.1", + "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz", + "integrity": "sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==", + "dependencies": { + "goober": "^2.1.10" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", "license": "MIT" }, + "node_modules/react-spring": { + "version": "9.7.3", + "resolved": "https://registry.npmjs.org/react-spring/-/react-spring-9.7.3.tgz", + "integrity": "sha512-oTxDpFV5gzq7jQX6+bU0SVq+vX8VnuuT5c8Zwn6CpDErOPvCmV+DRkPiEBtaL3Ozgzwiy5yFx83N0h303j/r3A==", + "dependencies": { + "@react-spring/core": "~9.7.3", + "@react-spring/konva": "~9.7.3", + "@react-spring/native": "~9.7.3", + "@react-spring/three": "~9.7.3", + "@react-spring/web": "~9.7.3", + "@react-spring/zdog": "~9.7.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -4670,9 +4874,9 @@ } }, "node_modules/tailwind-merge": { - "version": "1.13.2", - "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.13.2.tgz", - "integrity": "sha512-R2/nULkdg1VR/EL4RXg4dEohdoxNUJGLMnWIQnPKL+O9Twu7Cn3Rxi4dlXkDzZrEGtR+G+psSXFouWlpTyLhCQ==", + "version": "1.14.0", + "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz", + "integrity": "sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==", "funding": { "type": "github", "url": "https://github.com/sponsors/dcastil" diff --git a/package.json b/package.json index e7eca1d..544f44d 100644 --- a/package.json +++ b/package.json @@ -17,15 +17,17 @@ "clsx": "^1.2.1", "eslint": "8.44.0", "eslint-config-next": "13.4.9", + "framer-motion": "^11.0.8", "lucide-react": "^0.259.0", - "next": "13.4.9", + "next": "^13.4.9", "postcss": "8.4.25", "react": "18.2.0", "react-dom": "18.2.0", "react-hook-form": "^7.45.1", "react-hot-toast": "^2.4.1", + "react-spring": "^9.7.3", "resend": "^0.17.1", - "tailwind-merge": "^1.13.2", + "tailwind-merge": "^1.14.0", "tailwindcss": "3.3.2", "typescript": "5.1.6", "zod": "^3.21.4" diff --git a/src/app/globals.css b/src/app/globals.css index ecc2744..409d65d 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -90,3 +90,63 @@ body { 0.5 ); /* Background color of the thumb when hovered */ } + +/* Scale Of Single Tech Item In What I Know */ +#singleTech +{ + transition: 0.2s ease-in-out;/* Transition For Smooth Effect*/ +} +/* On Hover Tech Stack Item (i.e HTML, CSS, Tailwind) Will Be Scale Up To 1.2 */ +#singleTech:hover +{ + scale: 1.2; +} + +/* Effect On Instagram Link On Cover */ +#instagramCoverLink +{ + border: none; + background-color: black; + color: rgb(255, 255, 255); + overflow: hidden; + position: relative; + text-decoration: none; + transition: .2s transform ease-in-out; + will-change: transform; + z-index: 0; +} +#instagramCoverLink::after +{ + position: absolute; + top: 0; + transform: translate(-100%, 0) rotate(10deg); + transform-origin: top left; + transition: .2s transform ease-out; + will-change: transform; + z-index: -1; + left: 0; + background-color: rgb(255, 255, 255); + content: ''; + display: block; + height: 100%; + width: 100% +} +#instagramCoverLink:hover::after{ + transform: translate(0, 0); +} +#instagramCoverLink:hover +{ + border: none; + color: rgb(0, 0, 0); + transform: scale(1.05); + will-change: transform; +} + +/*All Kind Card Will Scale To 1.05 On Hover*/ +#card{ + transition: 0.3s ease-in-out; +} +#card:hover{ + scale: 1.05; +} + diff --git a/src/app/page.tsx b/src/app/page.tsx index c5dcaa1..4406be7 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -22,7 +22,6 @@ export default function Home() { {/* */} - diff --git a/src/components/Card/TechCard.tsx b/src/components/Card/TechCard.tsx index 15971ce..18209ca 100644 --- a/src/components/Card/TechCard.tsx +++ b/src/components/Card/TechCard.tsx @@ -17,7 +17,7 @@ const TechCard: FC = ({ title, classaName, tech }) => {
{tech.map((item, i) => ( -
= ({ title, classaName, tech }) => { item === 'AWS' && 'border border-yellow-500/60' )} > - {item} +

{item}

))}
diff --git a/src/components/Cover.tsx b/src/components/Cover.tsx index 0af4bb2..b313bb6 100644 --- a/src/components/Cover.tsx +++ b/src/components/Cover.tsx @@ -20,7 +20,7 @@ const Cover: FC = ({}) => { target="_blank" href="https://instagram.com/ezSnippet" > -