diff --git a/.env b/.env new file mode 100644 index 00000000..37d07d93 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +NEXT_PUBLIC_SERVICE_ID="service_w2pqelf" +NEXT_PUBLIC_TEMPLATE_ID="template_3uoj44t" +NEXT_PUBLIC_PUBLIC_KEY="2MWWo2J4BRIHK0on2" \ No newline at end of file diff --git a/jsconfig.json b/jsconfig.json index b8d6842d..f4f6bdf2 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,5 +1,6 @@ { "compilerOptions": { + "jsx": "react", "paths": { "@/*": ["./src/*"] } diff --git a/next.config.mjs b/next.config.mjs index 4678774e..a7978538 100644 --- a/next.config.mjs +++ b/next.config.mjs @@ -1,4 +1,17 @@ /** @type {import('next').NextConfig} */ -const nextConfig = {}; +const nextConfig = { + images: { + remotePatterns: [ + { + protocol: "https", + hostname: "images.pexels.com", + }, + { + protocol:"https", + hostname:"files.fm" + } + ], + }, +}; export default nextConfig; diff --git a/package-lock.json b/package-lock.json index f257168a..4d6bf430 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,23 +1,25 @@ { - "name": "nextportstarter", + "name": "lama-dev-portfolio-starter", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "nextportstarter", + "name": "lama-dev-portfolio-starter", "version": "0.1.0", "dependencies": { + "@emailjs/browser": "^4.3.3", + "framer-motion": "^11.2.5", "next": "14.1.0", - "react": "^18", - "react-dom": "^18" + "react": "18", + "react-dom": "18" }, "devDependencies": { - "autoprefixer": "^10.0.1", - "eslint": "^8", + "autoprefixer": "10.0.1", + "eslint": "8", "eslint-config-next": "14.1.0", - "postcss": "^8", - "tailwindcss": "^3.3.0" + "postcss": "8", + "tailwindcss": "3.3.0" } }, "node_modules/@aashutoshrathi/word-wrap": { @@ -29,18 +31,6 @@ "node": ">=0.10.0" } }, - "node_modules/@alloc/quick-lru": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", - "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", - "dev": true, - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/@babel/runtime": { "version": "7.23.9", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.9.tgz", @@ -53,6 +43,14 @@ "node": ">=6.9.0" } }, + "node_modules/@emailjs/browser": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/@emailjs/browser/-/browser-4.3.3.tgz", + "integrity": "sha512-ltpt2S/WVREIBXptxYAVYBvXb2O6yTUYiRUWF8OLikMxlmiGsIgKpgHppikNd4Df0uAav7jCsQKcOJ3TJFUx5g==", + "engines": { + "node": ">=14.0.0" + } + }, "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", @@ -828,31 +826,17 @@ } }, "node_modules/autoprefixer": { - "version": "10.4.17", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.17.tgz", - "integrity": "sha512-/cpVNRLSfhOtcGflT13P2794gVSgmPgTR+erw5ifnMLZb0UnSlkK4tquLmkd3BhA+nLo5tX8Cu0upUsGKvKbmg==", + "version": "10.0.1", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.0.1.tgz", + "integrity": "sha512-aQo2BDIsoOdemXUAOBpFv4ZQa2DrOtEufarYhtFsK1088Ca0TUwu/aQWf0M3mrILXZ3mTIVn1lR3hPW8acacsw==", "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "tidelift", - "url": "https://tidelift.com/funding/github/npm/autoprefixer" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], "dependencies": { - "browserslist": "^4.22.2", - "caniuse-lite": "^1.0.30001578", - "fraction.js": "^4.3.7", + "browserslist": "^4.14.5", + "caniuse-lite": "^1.0.30001137", + "colorette": "^1.2.1", "normalize-range": "^0.1.2", - "picocolors": "^1.0.0", - "postcss-value-parser": "^4.2.0" + "num2fraction": "^1.2.2", + "postcss-value-parser": "^4.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" @@ -860,6 +844,10 @@ "engines": { "node": "^10 || ^12 || >=14" }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, "peerDependencies": { "postcss": "^8.1.0" } @@ -1103,6 +1091,12 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/colorette": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.4.0.tgz", + "integrity": "sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==", + "dev": true + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -1966,17 +1960,28 @@ "url": "https://github.com/sponsors/isaacs" } }, - "node_modules/fraction.js": { - "version": "4.3.7", - "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz", - "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==", - "dev": true, - "engines": { - "node": "*" + "node_modules/framer-motion": { + "version": "11.2.5", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.2.5.tgz", + "integrity": "sha512-X22i42hWY423wx2C1TlQlC4UnWonD+udND0qX1Fkt0dDlreSmuNY76obO6Y2d/UdJPhqVd5Zn6g1jAIwF6Xx9A==", + "dependencies": { + "tslib": "^2.4.0" }, - "funding": { - "type": "patreon", - "url": "https://github.com/sponsors/rawify" + "peerDependencies": { + "@emotion/is-prop-valid": "*", + "react": "^18.0.0", + "react-dom": "^18.0.0" + }, + "peerDependenciesMeta": { + "@emotion/is-prop-valid": { + "optional": true + }, + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } } }, "node_modules/fs.realpath": { @@ -3087,6 +3092,12 @@ "node": ">=0.10.0" } }, + "node_modules/num2fraction": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz", + "integrity": "sha512-Y1wZESM7VUThYY+4W+X4ySH2maqcA+p7UR+w8VWNWVAd6lwuXXWz/w/Cz43J/dI2I+PS6wD5N+bJUF+gjWvIqg==", + "dev": true + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -3404,9 +3415,9 @@ } }, "node_modules/postcss-import": { - "version": "15.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", - "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "version": "14.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", + "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", "dev": true, "dependencies": { "postcss-value-parser": "^4.0.0", @@ -3414,7 +3425,7 @@ "resolve": "^1.1.7" }, "engines": { - "node": ">=14.0.0" + "node": ">=10.0.0" }, "peerDependencies": { "postcss": "^8.0.0" @@ -3440,26 +3451,20 @@ } }, "node_modules/postcss-load-config": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz", - "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==", + "version": "3.1.4", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", + "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", "dev": true, - "funding": [ - { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - { - "type": "github", - "url": "https://github.com/sponsors/ai" - } - ], "dependencies": { - "lilconfig": "^3.0.0", - "yaml": "^2.3.4" + "lilconfig": "^2.0.5", + "yaml": "^1.10.2" }, "engines": { - "node": ">= 14" + "node": ">= 10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" }, "peerDependencies": { "postcss": ">=8.0.9", @@ -3474,22 +3479,13 @@ } } }, - "node_modules/postcss-load-config/node_modules/lilconfig": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.0.0.tgz", - "integrity": "sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==", - "dev": true, - "engines": { - "node": ">=14" - } - }, "node_modules/postcss-nested": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz", - "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", + "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", "dev": true, "dependencies": { - "postcss-selector-parser": "^6.0.11" + "postcss-selector-parser": "^6.0.10" }, "engines": { "node": ">=12.0" @@ -3503,9 +3499,9 @@ } }, "node_modules/postcss-selector-parser": { - "version": "6.0.15", - "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz", - "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==", + "version": "6.0.16", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz", + "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==", "dev": true, "dependencies": { "cssesc": "^3.0.0", @@ -3570,6 +3566,18 @@ } ] }, + "node_modules/quick-lru": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", + "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", + "dev": true, + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -4183,40 +4191,45 @@ } }, "node_modules/tailwindcss": { - "version": "3.4.1", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz", - "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==", + "version": "3.3.0", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz", + "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==", "dev": true, "dependencies": { - "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.5.3", + "color-name": "^1.1.4", "didyoumean": "^1.2.2", "dlv": "^1.1.3", - "fast-glob": "^3.3.0", + "fast-glob": "^3.2.12", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", - "jiti": "^1.19.1", - "lilconfig": "^2.1.0", + "jiti": "^1.17.2", + "lilconfig": "^2.0.6", "micromatch": "^4.0.5", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.0.0", - "postcss": "^8.4.23", - "postcss-import": "^15.1.0", - "postcss-js": "^4.0.1", - "postcss-load-config": "^4.0.1", - "postcss-nested": "^6.0.1", + "postcss": "^8.0.9", + "postcss-import": "^14.1.0", + "postcss-js": "^4.0.0", + "postcss-load-config": "^3.1.4", + "postcss-nested": "6.0.0", "postcss-selector-parser": "^6.0.11", - "resolve": "^1.22.2", - "sucrase": "^3.32.0" + "postcss-value-parser": "^4.2.0", + "quick-lru": "^5.1.1", + "resolve": "^1.22.1", + "sucrase": "^3.29.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" }, "engines": { - "node": ">=14.0.0" + "node": ">=12.13.0" + }, + "peerDependencies": { + "postcss": "^8.0.9" } }, "node_modules/tapable": { @@ -4663,12 +4676,12 @@ "dev": true }, "node_modules/yaml": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.4.tgz", - "integrity": "sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==", + "version": "1.10.2", + "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", + "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", "dev": true, "engines": { - "node": ">= 14" + "node": ">= 6" } }, "node_modules/yocto-queue": { diff --git a/package.json b/package.json index 199fbe06..64df09da 100644 --- a/package.json +++ b/package.json @@ -9,15 +9,17 @@ "lint": "next lint" }, "dependencies": { + "@emailjs/browser": "^4.3.3", + "framer-motion": "^11.2.5", + "next": "14.1.0", "react": "18", - "react-dom": "18", - "next": "14.1.0" + "react-dom": "18" }, "devDependencies": { "autoprefixer": "10.0.1", - "postcss": "8", - "tailwindcss": "3.3.0", "eslint": "8", - "eslint-config-next": "14.1.0" + "eslint-config-next": "14.1.0", + "postcss": "8", + "tailwindcss": "3.3.0" } } diff --git a/public/apiIcon.png b/public/apiIcon.png new file mode 100644 index 00000000..89afabce Binary files /dev/null and b/public/apiIcon.png differ diff --git a/public/apiIntegrationIcon.png b/public/apiIntegrationIcon.png new file mode 100644 index 00000000..fa575609 Binary files /dev/null and b/public/apiIntegrationIcon.png differ diff --git a/public/bootstrap.png b/public/bootstrap.png new file mode 100644 index 00000000..5c6283d5 Binary files /dev/null and b/public/bootstrap.png differ diff --git a/public/cssIcon2.png b/public/cssIcon2.png new file mode 100644 index 00000000..f5bc4b08 Binary files /dev/null and b/public/cssIcon2.png differ diff --git a/public/dribbble.png b/public/dribbble.png deleted file mode 100644 index be61acb4..00000000 Binary files a/public/dribbble.png and /dev/null differ diff --git a/public/github2.png b/public/github2.png new file mode 100644 index 00000000..2f99634d Binary files /dev/null and b/public/github2.png differ diff --git a/public/hero.jpg b/public/hero.jpg new file mode 100644 index 00000000..9cb137ac Binary files /dev/null and b/public/hero.jpg differ diff --git a/public/hero.png b/public/hero.png index 6d6442a0..5185f7de 100644 Binary files a/public/hero.png and b/public/hero.png differ diff --git a/public/heroOne.png b/public/heroOne.png new file mode 100644 index 00000000..bb48c434 Binary files /dev/null and b/public/heroOne.png differ diff --git a/public/html5.png b/public/html5.png new file mode 100644 index 00000000..cca4d4d0 Binary files /dev/null and b/public/html5.png differ diff --git a/public/instagram.png b/public/instagram.png deleted file mode 100644 index 56d6b707..00000000 Binary files a/public/instagram.png and /dev/null differ diff --git a/public/javascript.png b/public/javascript.png new file mode 100644 index 00000000..2b933eb4 Binary files /dev/null and b/public/javascript.png differ diff --git a/public/json.png b/public/json.png new file mode 100644 index 00000000..196ad13c Binary files /dev/null and b/public/json.png differ diff --git a/public/mongoDb.png b/public/mongoDb.png new file mode 100644 index 00000000..b17b2f55 Binary files /dev/null and b/public/mongoDb.png differ diff --git a/public/newRecipeApp.png b/public/newRecipeApp.png new file mode 100644 index 00000000..6482a004 Binary files /dev/null and b/public/newRecipeApp.png differ diff --git a/public/nextJs.png b/public/nextJs.png new file mode 100644 index 00000000..8941bdd8 Binary files /dev/null and b/public/nextJs.png differ diff --git a/public/pinterest.png b/public/pinterest.png deleted file mode 100644 index 073477fe..00000000 Binary files a/public/pinterest.png and /dev/null differ diff --git a/public/postgresql.png b/public/postgresql.png new file mode 100644 index 00000000..32dbaf3e Binary files /dev/null and b/public/postgresql.png differ diff --git a/public/reactIcon.png b/public/reactIcon.png new file mode 100644 index 00000000..e399655d Binary files /dev/null and b/public/reactIcon.png differ diff --git a/public/reduxIcon.png b/public/reduxIcon.png new file mode 100644 index 00000000..2501ce3c Binary files /dev/null and b/public/reduxIcon.png differ diff --git a/public/scssIcon.png b/public/scssIcon.png new file mode 100644 index 00000000..6fa71166 Binary files /dev/null and b/public/scssIcon.png differ diff --git a/public/tailwind.png b/public/tailwind.png new file mode 100644 index 00000000..bc6d3b4e Binary files /dev/null and b/public/tailwind.png differ diff --git a/public/textUtils.png b/public/textUtils.png new file mode 100644 index 00000000..6fe80bdc Binary files /dev/null and b/public/textUtils.png differ diff --git a/public/todoAPp.png b/public/todoAPp.png new file mode 100644 index 00000000..8f646e3a Binary files /dev/null and b/public/todoAPp.png differ diff --git a/public/typeScript.png b/public/typeScript.png new file mode 100644 index 00000000..2523b1a4 Binary files /dev/null and b/public/typeScript.png differ diff --git a/public/userRegistry.png b/public/userRegistry.png new file mode 100644 index 00000000..94ed7b3b Binary files /dev/null and b/public/userRegistry.png differ diff --git a/src/app/about/page.jsx b/src/app/about/page.jsx new file mode 100644 index 00000000..194175d4 --- /dev/null +++ b/src/app/about/page.jsx @@ -0,0 +1,231 @@ +"use client"; +import { motion, useInView, useScroll } from "framer-motion"; +import Signature from "../../components/atoms/signature"; +import Scroll from "@/components/atoms/scroll"; +import { Skills } from "@/constants/skills"; +import Brain from "@/components/atoms/brain"; +import { useRef } from "react"; +import Image from "next/image"; +const AboutPage = () => { + const containerRef = useRef(); + const { scrollYProgress } = useScroll({ container: containerRef }); + const skillRef = useRef(); + const isSkillRefInVIew = useInView(skillRef, { once: true }); + const experienceRef = useRef(); + const isExperinceRefInView = useInView(experienceRef, { once: true }); + return ( + + {/* containter */} +
+ {/* textcontainer */} +
+ {/* biographhy-contatiner */} +
+

+ My Journey +

+

+ My journey into tech started with a simple moment - browsing a + book website. I was blown away by its smooth operation. Curiosity + led me to explore how websites work, and I was hooked. Learning + about web development became my passion. Now, as an + + Frontend Devloper + + , that initial spark still drives me. I'm eager to keep + learning and growing in this exciting field. +

+ + "Frontend development: where we turn caffeine into code and + pixels into magic." + + + {/* biography sign svg */} +
+ +
+ {/* biography scroll svg */} + + + + {/* skillContainer */} +
+ + SKILLS + + + {Skills.map((item, index) => ( +
+ skills Icons +
+ ))} + + + + +
+ {/* experineceContaitner */} +
+ + Experience + + {/* explist */} + + {/* explistitem */} +
+ {/* left */} +
+ {/* jobtitle */} +
+ React Intern +
+ {/* jobdiscription */} +
+ Engaged in a React internship, actively contributing to + real-world projects. Elevating frontend skills with + hands-on React.js experience. Ready to make an impact! +
+ {/* jobdate */} +
+ 2024-Present +
+
+ Yoddha Lab +
+
+ {/* centers */} +
+ {/* line */} +
+ {/* circle */} +
+
+
+ {/* right */} +
+
+ {/* explistitem */} +
+ {/* left */} +
+ {/* centers */} +
+ {/* line */} +
+ {/* circle */} +
+
+
+ {/* right */} +
+ {/* jobtitle */} +
+ Computer Science Instructor +
+ {/* jobdiscription */} +
+ Developed and delivered curriculum for grades 8 to 10, + covering C programming and HTML/CSS. +
+ {/* jobdate */} +
+ 2022-2024 +
+
+ CSS School +
+
+
+ {/* explistitem */} +
+ {/* left */} +
+ {/* jobtitle */} +
+ Autodidactic React Journey +
+ {/* jobdiscription */} +
+ Explore my autodidactic journey in React, where I built + dynamic web applications and deepened my understanding of + modern web development. +
+ {/* jobdate */} +
+ 2022-Present +
+
+ Self +
+
+ {/* centers */} +
+ {/* line */} +
+ {/* circle */} +
+
+
+ {/* right */} +
+
+ +
+
+
+
+ +
+
+ + ); +}; + +export default AboutPage; diff --git a/src/app/contact/page.jsx b/src/app/contact/page.jsx new file mode 100644 index 00000000..7b1b8e69 --- /dev/null +++ b/src/app/contact/page.jsx @@ -0,0 +1,133 @@ +"use client"; +import { motion } from "framer-motion"; +import emailjs from "@emailjs/browser"; +import { useEffect, useRef, useState } from "react"; + +const ContactPage = () => { + const [sucess, setSuccess] = useState(false); + const [validationErr, setValidationErr] = useState(""); + const [err, setErr] = useState(false); + const text = "Say Hello"; + const form = useRef(); + + const sendEmail = (e) => { + e.preventDefault(); + setErr(false); + setSuccess(false); + setValidationErr(""); + const email = form.current.user_email.value; + const message = form.current.user_message.value; + + if (!message) { + setValidationErr("Please enter a message."); + return; + } + if (!email || !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)) { + setValidationErr("Please enter a valid email address."); + return; + } + emailjs + .sendForm( + process.env.NEXT_PUBLIC_SERVICE_ID, + process.env.NEXT_PUBLIC_TEMPLATE_ID, + form.current, + process.env.NEXT_PUBLIC_PUBLIC_KEY + ) + .then( + () => { + setSuccess(true); + form.current.reset(); + }, + (error) => { + setErr(true); + console.log(error); + } + ); + }; + useEffect(() => { + setTimeout(() => { + if (sucess) { + setSuccess(false); + } else { + setErr(false); + } + }, 3000); + }, [sucess, err]); + return ( + +
+ {/* text-Containter */} +
+
+ {text.split("").map((letter, index) => ( + + {letter} + + ))} +
😊
+
+
+ {/* form-containter */} +
+
+
+
+ + +
+
+ + +
+ + {validationErr && ( + + {validationErr} + + )} + {sucess && ( + + Your message has been sent sucessfully! + + )} + {err && ( + + Something went wrong! + + )} +
+
+
+
+ + ); +}; + +export default ContactPage; diff --git a/src/app/globals.css b/src/app/globals.css index bd6213e1..18f3a4a4 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,3 +1,405 @@ @tailwind base; @tailwind components; -@tailwind utilities; \ No newline at end of file +@tailwind utilities; + +body { + overflow-x: hidden; +} +::-webkit-scrollbar-track { + background-color: transparent; +} + +::-webkit-scrollbar { + width: 5px; + height: 5px; + display: none; +} + +::-webkit-scrollbar-thumb { + @apply rounded-3xl bg-gradient-to-b from-blue-100 to-red-100; +} + + +/* contact-form */ +.form-container { + + background: linear-gradient(#212121, #212121) padding-box, + linear-gradient(145deg, transparent 35%, red, #40c9ff) border-box; + border: 2px solid transparent; + padding: 32px 24px; + font-size: 14px; + font-family: inherit; + color: white; + display: flex; + flex-direction: column; + gap: 20px; + box-sizing: border-box; + border-radius: 16px; + background-size: 200% 100%; + animation: gradient 5s ease infinite; + +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 50%; + } + + 100% { + background-position: 0% 50%; + } +} + +.form-container button:active { + scale: 0.95; +} + +.form-container .form { + display: flex; + flex-direction: column; + gap: 20px; +} + +.form-container .form-group { + display: flex; + flex-direction: column; + gap: 2px; +} + +.form-container .form-group label { + display: block; + margin-bottom: 5px; + color: #717171; + font-weight: 600; + font-size: 12px; +} + +.form-container .form-group input { + border: none; + outline: none; + padding: 0px 7px; + border-radius: 6px; + color: #fff; + font-size: 15px; + background-color: transparent; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), + -1px -1px 6px rgba(255, 255, 255, 0.4); +} + +.form-container .form-group textarea { + width: 100%; + padding: 12px 16px; + border-radius: 8px; + resize: none; + color: #fff; + border: 1px solid #414141; + outline: none; + background-color: transparent; + font-family: inherit; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), + -1px -1px 6px rgba(255, 255, 255, 0.4); +} + +.form-container .form-group input::placeholder { + opacity: 0.5; +} + +.form-container .form-group input:focus { + border: 2px solid transparent; + color: #fff; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), + -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1), + inset -1px -1px 6px rgba(255, 255, 255, 0.4); +} + +.form-container .form-group textarea:focus { + border: 2px solid transparent; + color: #fff; + box-shadow: 3px 3px 10px rgba(0, 0, 0, 1), + -1px -1px 6px rgba(255, 255, 255, 0.4), inset 3px 3px 10px rgba(0, 0, 0, 1), + inset -1px -1px 6px rgba(255, 255, 255, 0.4); +} + +.form-container .form-submit-btn { + display: flex; + align-items: center; + justify-content: center; + background: transparent; + color: #fff; + font-size: 17px; + text-transform: uppercase; + font-weight: 600; + border: none; + padding: 20px 30px; + perspective: 30rem; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.308); +} +.form-container .form-submit-btn::before { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + border-radius: 10px; + background: linear-gradient( + 320deg, + rgba(0, 140, 255, 0.678), + rgba(128, 0, 128, 0.308) + ); + z-index: 1; + transition: background 3s; +} +.form-container .form-submit-btn:hover::before { + animation: rotate 1s; + transition: all 0.5s; +} + +@keyframes rotate { + 0% { + transform: rotateY(180deg); + } + + 100% { + transform: rotateY(360deg); + } +} + +/* navbar */ +.name-button { + display: flex; + border-radius: 20px; + +} +.box { + width: 35px; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + font-size: 15px; + font-weight: 700; + transition: all 0.8s; + cursor: pointer; + position: relative; + border: none; + outline: none; + padding: 0px 7px; + border-radius: 6px; + color: #fff; + background-color: black; + box-shadow: 3px 3px 10px rgba(0,0,0,1); + overflow: hidden; + + +} + +.box:before { + content: "K"; + position: absolute; + top: 0; + background: white; + color:black; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + transform: translateY(100%); + transition: transform 0.4s; +} + +.box:nth-child(2)::before { + transform: translateY(-100%); + content: "A"; +} + +.box:nth-child(3)::before { + content: "T"; +} + +.box:nth-child(4)::before { + transform: translateY(-100%); + content: "W"; +} + +.box:nth-child(5)::before { + content: "A"; +} +.box:nth-child(6)::before { + transform: translateY(-100%); + content: "L"; +} +.name-button:hover .box:before { + transform: translateY(0); +} + + +/* homepage-btns */ +.btn { + font-size: 1.2rem; + padding: 8px 10px; + border: none; + outline: none; + border-radius: 0.4rem; + cursor: pointer; + text-transform: uppercase; + background-color: rgb(14, 14, 26); + color: rgb(234, 234, 234); + font-weight: 700; + transition: 0.6s; + box-shadow: 0px 0px 5px #1f4c65; + +} + +.btn:active { + scale: 0.92; +} + +.btn:hover { + background: rgb(2,29,78); + background: linear-gradient(270deg, rgba(2, 29, 78, 0.681) 0%, rgba(31, 215, 232, 0.873) 60%); + color: rgb(4, 4, 38); + -webkit-box-reflect: below 10px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4)); +} + +/* social-media */ +.wrapper { + display: inline-flex; + list-style: none; + height: 120px; + width: 100%; + padding-top: 30px; + font-family: "Poppins", sans-serif; + justify-content: end; +} + +.wrapper .icon { + position: relative; + background: #fff; + border-radius: 50%; + margin: 10px; + width: 50px; + height: 50px; + font-size: 18px; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + cursor: pointer; + transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip { + position: absolute; + bottom: 0; /* Adjust this value to position the tooltip below the element */ + transform: translateY(100%); /* Position the tooltip below */ + font-size: 14px; + background: #fff; + color: #fff; + padding: 5px 8px; + border-radius: 5px; + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1); + opacity: 0; + pointer-events: none; + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .tooltip::before { + position: absolute; + content: ""; + height: 8px; + width: 8px; + background: #fff; + top: -4px; /* Adjust this value to align the arrow with the tooltip */ + left: 50%; + transform: translate(-50%) rotate(45deg); + transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); +} + +.wrapper .icon:hover .tooltip { + bottom: -10px; /* Adjust this value to control the distance of the tooltip from the icon */ + opacity: 1; + visibility: visible; + pointer-events: auto; +} + +.wrapper .icon:hover span, +.wrapper .icon:hover .tooltip { + text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1); +} + +.wrapper .facebook:hover, +.wrapper .facebook:hover .tooltip, +.wrapper .facebook:hover .tooltip::before { + background: #1877f2; + color: #fff; +} + +.wrapper .linkedin:hover, +.wrapper .linkedin:hover .tooltip, +.wrapper .linkedin:hover .tooltip::before { + background: #1da1f2; + color: #fff; +} + +.wrapper .github:hover, +.wrapper .github:hover .tooltip, +.wrapper .github:hover .tooltip::before { + background: black; + color: #fff; +} + +/* protfolio */ +.pcontainer { + position: relative; + display: flex; + justify-content: center; + align-items: center; +} + +.pcontainer .glass { + position: relative; + width: 380px; + height: 400px; + background: linear-gradient(#fff2, transparent); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25); + transition: 0.5s; + border-radius: 10px; + margin: 0 -45px; + backdrop-filter: blur(10px); + transform: rotate(calc(var(--r) * 1deg)); +} + +.pcontainer:hover .glass { + transform: rotate(0deg); + cursor: pointer; + margin: 0 10px; +} + +.pcontainer .glass::before { + content: attr(data-text); + position: absolute; + bottom: 0; + width: 100%; + height: 40px; + background: rgba(255, 255, 255, 0.05); + display: flex; + justify-content: center; + align-items: center; + color: #fff; +} +.pcontainer .glass img { + font-size: 2.5em; + fill: #fff; +} + +/* my-works */ diff --git a/src/app/layout.js b/src/app/layout.js index 36c27904..f522a1a9 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,17 +1,67 @@ +import TransitionProvider from "@/components/transitionProvider"; import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { - title: "Lama Dev Portfolio App", - description: "Generated by create next app", + title: "Nelson Katwal | Animation Portfolio", + description: + "Explore the creative works of Nelson Katwal, a frontend developer showcasing a portfolio of animations, designs, and artistic projects.", + keywords: + "Nelson Katwal, animation, portfolio, animator, design, art, creative works, animation projects", + author: "Nelson Katwal", + openGraph: { + title: "Nelson Katwal | Animation Portfolio", + description: + "Explore the creative works of Nelson Katwal, a professional animator showcasing a portfolio of animations, designs, and artistic projects.", + url: "https://www.nelsonkatwal.com.np", + type: "website", + images: [ + { + url: "https://nelsonkatwal.com.np/_next/image?url=%2Fhero.png&w=2048&q=75", + width: 800, + height: 600, + alt: "Nelson Katwal", + }, + ], + }, }; export default function RootLayout({ children }) { return ( - {children} + + + + + + + {/* Open Graph Meta Tags */} + + + + + + + + + + + {children} + ); } diff --git a/src/app/page.jsx b/src/app/page.jsx index 4dfb0aa9..a0728318 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,5 +1,65 @@ +"use client"; +import Image from "next/image"; +import { motion } from "framer-motion"; +import Link from "next/link"; + const Homepage = () => { - return
Hello World
; + const text = "Nelson Katwal,"; + return ( + +
+ {/* IMAGE CONTAINER */} +
+ +
+ {/* TEXT CONTAINER */} +
+ {/* titlle */} +
+ + Frontend Developer + +

Hello I'm

+

+ {text.split("").map((letter, index) => ( + + {letter} + + ))} +

+
+ {/* description */} +

+ a React wizard crafting sleek, lightning-fast web experiences. Dive + into my work and see what cutting-edge front-end development looks + like. Ready to build something amazing together? Let's talk. +

+
+ + + + + + +
+
+
+ + ); }; export default Homepage; diff --git a/src/app/portfolio/page.jsx b/src/app/portfolio/page.jsx new file mode 100644 index 00000000..a2d5a803 --- /dev/null +++ b/src/app/portfolio/page.jsx @@ -0,0 +1,116 @@ +"use client"; +import { Projects } from "@/constants/projects"; +import { motion, useScroll, useTransform } from "framer-motion"; +import Image from "next/image"; +import Link from "next/link"; +import { useRef } from "react"; + +const PortfolioPage = () => { + const ref = useRef(); + + const { scrollYProgress } = useScroll({ target: ref }); + const x = useTransform(scrollYProgress, [0, 1], ["0%", "-80%"]); + + return ( + +
+
+

My Works

+
+
+ +
+ {Projects.map((item) => ( +
+
+
+ {/* */} + +
+
+
+

+ {item.title} +

+

+ {item.desc} +

+

+ Technologies Used +

+
+ {item.technologies?.map((technogolies, index) => ( + + ))} +
+
+
+
+ + + +
+
+
+ ))} + +
+
+ {/*
+

Do you have a project?

+
+ + + + + + + Front-end Developer-React Developer - + + + + + Hire Me + +
+
*/} + + ); +}; + +export default PortfolioPage; diff --git a/src/components/atoms/brain.jsx b/src/components/atoms/brain.jsx new file mode 100644 index 00000000..de072262 --- /dev/null +++ b/src/components/atoms/brain.jsx @@ -0,0 +1,1623 @@ +"use client"; +import Link from "next/link"; +import { motion, useTransform } from "framer-motion"; + +const Brain = ({ scrollYProgress }) => { + const rotatesForward1 = useTransform(scrollYProgress, [0, 1], [0, 360]); + const rotatesForward2 = useTransform(scrollYProgress, [0, 1], [0, 180]); + const rotatesForward3 = useTransform(scrollYProgress, [0, 1], [0, 90]); + const rotatesForward4 = useTransform(scrollYProgress, [0, 1], [0, 45]); + const rotatesBackward1 = useTransform(scrollYProgress, [0, 1], [0, -360]); + const rotatesBackward2 = useTransform(scrollYProgress, [0, 1], [0, -180]); + const rotatesBackward3 = useTransform(scrollYProgress, [0, 1], [0, -90]); + const rotatesBackward4 = useTransform(scrollYProgress, [0, 1], [0, -45]); + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default Brain; diff --git a/src/components/atoms/scroll.jsx b/src/components/atoms/scroll.jsx new file mode 100644 index 00000000..8841cc20 --- /dev/null +++ b/src/components/atoms/scroll.jsx @@ -0,0 +1,21 @@ +const Scroll = () => { + return ( + + + + + + ); +}; + +export default Scroll; diff --git a/src/components/atoms/signature.jsx b/src/components/atoms/signature.jsx new file mode 100644 index 00000000..c94f0235 --- /dev/null +++ b/src/components/atoms/signature.jsx @@ -0,0 +1,722 @@ +const Signature = () => { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +export default Signature; diff --git a/src/components/atoms/tailwindIcon.jsx b/src/components/atoms/tailwindIcon.jsx new file mode 100644 index 00000000..b721077e --- /dev/null +++ b/src/components/atoms/tailwindIcon.jsx @@ -0,0 +1,24 @@ +import React from 'react' + +const tailwindIcon = () => { + return ( + + + + + + + + ); +} + +export default tailwindIcon diff --git a/src/components/atoms/tailwindcss-icon.svg b/src/components/atoms/tailwindcss-icon.svg new file mode 100644 index 00000000..2b1a4d67 --- /dev/null +++ b/src/components/atoms/tailwindcss-icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/navLink.jsx b/src/components/navLink.jsx new file mode 100644 index 00000000..7ae5bf4c --- /dev/null +++ b/src/components/navLink.jsx @@ -0,0 +1,21 @@ +"use client"; + +import Link from "next/link"; +import { usePathname } from "next/navigation"; + +const NavLink = ({ link }) => { + const pathName = usePathname(); + + return ( + + {link.title} + + ); +}; + +export default NavLink; diff --git a/src/components/navbar.jsx b/src/components/navbar.jsx new file mode 100644 index 00000000..9ece00ea --- /dev/null +++ b/src/components/navbar.jsx @@ -0,0 +1,185 @@ +"use client"; + +import Link from "next/link"; +import { useState } from "react"; +import NavLink from "./navLink"; +import { motion } from "framer-motion"; + +const links = [ + { url: "/", title: "Home" }, + { url: "/about", title: "About" }, + { url: "/portfolio", title: "Portfolio" }, + { url: "/contact", title: "Contact" }, +]; +const NavBar = () => { + const [open, setOpen] = useState(false); + const topVariants = { + closed: { + rotate: 0, + }, + opened: { + rotate: 45, + backgroundColor: "rgb(255,255,255)", + }, + }; + const centerVariants = { + closed: { + opacity: 1, + }, + opened: { + opacity: 0, + }, + }; + const bottomVairants = { + closed: { + rotate: 0, + }, + opened: { + rotate: -45, + backgroundColor: "rgb(255,255,255)", + }, + }; + const listVariants = { + closed: { + x: "100vw", + }, + opened: { + x: 0, + transition: { + when: "beforeChildren", + staggerChildren: 0.2, + }, + }, + }; + const listItemVariants = { + closed: { + x: -10, + opacity: 0, + }, + opened: { + x: 0, + opacity: 1, + }, + }; + return ( +
+
+ {/* links */} + {links.map((link) => ( + + ))} +
+ {/* logo */} +
+ +
+
N
+
E
+
L
+
S
+
O
+
N
+
+ +
+
+
    + +
  • + LinkedIn + + + + + +
    • +
  • + GitHub + + + + + +
    • +
+
+
+ + {open && ( + + {links.map((link,index) => ( + + + {link.title} + + + ))} + + )} +
+
+ ); +}; + +export default NavBar; diff --git a/src/components/transitionProvider.jsx b/src/components/transitionProvider.jsx new file mode 100644 index 00000000..40950afa --- /dev/null +++ b/src/components/transitionProvider.jsx @@ -0,0 +1,44 @@ +"use client"; + +import { AnimatePresence } from "framer-motion"; +import NavBar from "./navbar"; +import { motion } from "framer-motion"; +import { usePathname } from "next/navigation"; +const TransitionProvider = ({ children }) => { + const pathName = usePathname(); + return ( + +
+ + + {pathName.substring(1)} + + +
+ +
+
{children}
+
+ + ); +}; + +export default TransitionProvider; diff --git a/src/constants/projects.js b/src/constants/projects.js new file mode 100644 index 00000000..f61da8b8 --- /dev/null +++ b/src/constants/projects.js @@ -0,0 +1,38 @@ +export const Projects = [ + { + id: 1, + color: "from-red-300 to-blue-300", + title: "Recipe App", + desc: "This app lets you explore a wide range of food recipes with a user-friendly and attractive design. You can browse, search, and find detailed instructions and ingredient lists for each recipe, making cooking easy and fun.", + img: "/newRecipeApp.png", + link: "https://recipe-app-version1.vercel.app/", + technologies: ["/reactIcon.png", "/apiIcon.png", "/tailwind.png"], + }, + { + id: 2, + color: "from-blue-300 to-violet-300", + title: "Text-Utlis App", + desc: "Developed a Text Utils app that offers text case changing, word and character counts, text-to-speech, customizable modes, and additional features for enhanced functionality.", + img: "/textUtils.png", + link: "https://textutils7.netlify.app/", + technologies: ["/reactIcon.png", "/bootstrap.png"], + }, + { + id: 3, + color: "from-violet-300 to-purple-300", + title: "User Registry App", + desc: "The User Registry App is a comprehensive solution, enabling users to effortlessly perform CRUD operations - Create, Read, Update, Delete - on user records which ensures smooth management of user data.", + img: "/userRegistry.png", + link: "https://user-registry-beryl.vercel.app/", + technologies: ["/reactIcon.png", "/json.png", "/tailwind.png"], + }, + { + id: 4, + color: "from-purple-300 to-red-300", + title: "Todo App", + desc: "Built a TodoApp dedicated to helping users keep track of their tasks and responsibilities effectively. With intuitive features, it ensures a seamless experience for organizing and managing to-do lists.", + img: "/todoAPp.png", + link: "https://chetreenelson.github.io/todoApp/", + technologies: ["/html5.png", "/cssIcon2.png", "/javascript.png"], + }, +]; diff --git a/src/constants/skills.js b/src/constants/skills.js new file mode 100644 index 00000000..0b11b14f --- /dev/null +++ b/src/constants/skills.js @@ -0,0 +1,13 @@ +export const Skills = [ + "/reactIcon.png", + "/nextJs.png", + "/github2.png", + "/javascript.png", + "/typeScript.png", + "/mongoDb.png", + "/postgresql.png", + "/apiIntegrationIcon.png", + "/reduxIcon.png", + "/tailwind.png", + "/bootstrap.png", +];