├── .eslintrc.json ├── .gitignore ├── LICENSE ├── README.md ├── Screenshot 2023-08-06 131904.png ├── blogList.txt ├── components └── buttons │ ├── AnimatedButton.jsx │ └── BackTo.jsx ├── constants ├── AppsData.js ├── BlogsData.js ├── EducationData.js ├── ExperienceData.jsx ├── JourneyData.js ├── NavbarData.js ├── NewsData.js ├── ProjectsData.js ├── SkillsData.js ├── SocialMediaData.js └── index.js ├── context └── themeContext.js ├── contextApi └── PortfolioContext.jsx ├── database └── connect.js ├── jsconfig.json ├── layout ├── footer │ └── Footer.jsx └── navbar │ ├── Navbar.jsx │ ├── NavbarItems.js │ ├── NavbarMobile.jsx │ └── SidebarMobile.jsx ├── models ├── feedback.js └── mail.js ├── next.config.js ├── package-lock.json ├── package.json ├── pages ├── _app.js ├── _document.js ├── api │ ├── chatgpt.js │ ├── feedback │ │ └── new.js │ ├── mail │ │ └── new.js │ ├── masonary.js │ ├── news.js │ └── translate.js ├── apps │ ├── apna-chat-gpt.jsx │ ├── hindi-translator.jsx │ ├── music-chalao.jsx │ ├── news-app.jsx │ ├── quiz-app.jsx │ └── tic-tac-toe.jsx ├── blogs.jsx ├── blogs │ ├── css │ │ ├── blend-mode.jsx │ │ ├── css-animation.jsx │ │ ├── css-grid.jsx │ │ ├── css-rare-selectors.jsx │ │ ├── css-transform.jsx │ │ ├── linear-gradient.jsx │ │ └── object-fit.jsx │ ├── javascript │ │ ├── Hoisting.jsx │ │ ├── closure.jsx │ │ ├── debouncing.jsx │ │ ├── letVarConst.jsx │ │ ├── spreadOperator.jsx │ │ └── throttling.jsx │ ├── others │ │ ├── github-pages-deployment.jsx │ │ ├── readme.jsx │ │ ├── send-email.jsx │ │ └── why-next.jsx │ └── react │ │ ├── component-life-cycle.jsx │ │ ├── drag-and-drop.jsx │ │ ├── fragment.jsx │ │ ├── react-masonary.jsx │ │ ├── react-res-carousel.jsx │ │ ├── useEffect.jsx │ │ ├── useState.jsx │ │ └── virtual-dom.jsx └── index.js ├── postcss.config.js ├── public ├── favicon.ico ├── images │ ├── admin-dashboard.png │ ├── apna-chat-gpt-l.png │ ├── apna-chat-gpt.png │ ├── carousel1.png │ ├── carousel2.png │ ├── carousel3.png │ ├── cartoon 0.png │ ├── chat-gpt.ico │ ├── circle.png │ ├── developer.png │ ├── ecommerce.png │ ├── hii.png │ ├── hindi-translator-l.png │ ├── hindi-translator.ico │ ├── hindi-translator.png │ ├── male.png │ ├── news-app-l.png │ ├── news-app.ico │ ├── news-app.png │ ├── quiz-app-l.png │ ├── quiz-app.ico │ ├── quiz-app.png │ ├── room.jpg │ ├── salon-application.png │ ├── screen1.png │ ├── screen2.png │ ├── tic-tac-toe-l.png │ ├── tic-tac-toe.ico │ ├── tic-tac-toe.png │ ├── welcome-screen.png │ ├── x.png │ └── youtube-clone.png ├── next.svg └── vercel.svg ├── sections ├── Apps.jsx ├── Intro.jsx ├── LatestBlogs.jsx ├── Projects.jsx ├── Skills.jsx ├── about.jsx ├── education.jsx ├── experience.jsx └── journeyParts │ ├── College.jsx │ ├── FirstInternship.jsx │ ├── Iit.jsx │ ├── School.jsx │ ├── SecondInternship.jsx │ ├── YouTube.jsx │ └── index.js ├── styles ├── Home.module.css ├── animation.css ├── cssGrid.css └── globals.css ├── tailwind.config.js └── utils ├── ChatSystem.jsx ├── Feedback.jsx ├── Resume.jsx ├── SendMail.jsx ├── ShoveeModal.jsx ├── SocialMedia.jsx └── Theme.jsx /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["next/core-web-vitals"], 3 | "rules": { 4 | "no-multiple-empty-lines": ["error", { "max": 2 }], 5 | "import/no-duplicates": "error", 6 | "import/order": [ 7 | "error", 8 | { 9 | "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]], 10 | "newlines-between": "always" 11 | } 12 | ], 13 | "quotes": ["error", "double"], 14 | "react/jsx-max-props-per-line": ["error", { "maximum": 3 }], 15 | "react/jsx-sort-props": ["error", { "ignoreCase": true }], 16 | "react/self-closing-comp": "error" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # local env files 28 | .env*.local 29 | 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Shivraj 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Screenshot 2023-08-06 131904.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/117b48acd745ea5112462fe4e36d92358b9da7dc/Screenshot 2023-08-06 131904.png -------------------------------------------------------------------------------- /blogList.txt: -------------------------------------------------------------------------------- 1 | 1. Why Next JS 2 | 3 | 2. CSS Transform 4 | 5 | 3. background-blend-mode 6 | 7 | 4. Css Rare Selector 8 | 9 | 5. Hoisting in JavaScript 10 | 11 | 6. React Responsive Carousel 12 | 13 | 7. CSS Animation 14 | 15 | 8. Object Fit 16 | 17 | 9. linear-gradient 18 | 19 | 10. How to send a email with attachment in node js 20 | 21 | 11. Tic-Tac-Toe 22 | 23 | 12. Drag And Drop 24 | 25 | 13. React Masonary 26 | 27 | 14. Css Grid 28 | 29 | 15. Deployment on Github Pages 30 | 31 | 16. Readme file syntax 32 | 33 | 17. Quiz App 34 | 35 | 18. Hindi Translator 36 | 37 | 19. Apna Chat gpt 38 | 39 | 20 News App 40 | 41 | 20 Music Chalao 42 | 43 | 21 closure in Javasript 44 | 45 | 22. Debouncing in JavaScript 46 | 47 | 23. Throttling in javascript 48 | 49 | 23. Rest and Spread Operator in javascript 50 | 51 | 24. let, var and const 52 | 53 | 25. Component Life Cycle 54 | 55 | 26. useEffect in React 56 | 57 | 27. useState in React 58 | 59 | 28. Virtual DOM in React 60 | 61 | 29. Fragment in React -------------------------------------------------------------------------------- /components/buttons/AnimatedButton.jsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import { motion } from "framer-motion"; 3 | 4 | const AnimatedButton = () => ( 5 | 6 | 16 | Explore All Blogs 17 | 18 | 19 | ); 20 | 21 | export default AnimatedButton; 22 | -------------------------------------------------------------------------------- /components/buttons/BackTo.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Link from "next/link"; 3 | import { HiArrowNarrowLeft } from "react-icons/hi"; 4 | 5 | const BackTo = ({ backTo }) => { 6 | return ( 7 | 8 |
9 | 10 |
11 | 12 | 13 | 14 | Back to {backTo === "" ? "Home" : backTo} 15 |
16 | 17 |
18 | 19 | ); 20 | }; 21 | 22 | export default BackTo; 23 | -------------------------------------------------------------------------------- /constants/AppsData.js: -------------------------------------------------------------------------------- 1 | export const AppsData = [ 2 | { 3 | name: "Tic-Tac-Toe", 4 | imageUrl: "/images/tic-tac-toe.png", 5 | imageLight: "/images/tic-tac-toe-l.png", 6 | iconUrl: "/images/tic-tac-toe.ico", 7 | linkName: "apps/tic-tac-toe", 8 | date: "June 9, 2023", 9 | }, 10 | { 11 | name: "Quiz App", 12 | imageUrl: "/images/quiz-app.png", 13 | imageLight: "/images/quiz-app-l.png", 14 | iconUrl: "/images/quiz-app.ico", 15 | linkName: "apps/quiz-app", 16 | date: "June 20, 2023", 17 | }, 18 | { 19 | name: "Translator", 20 | imageUrl: "/images/hindi-translator.png", 21 | imageLight: "/images/hindi-translator-l.png", 22 | iconUrl: "/images/hindi-translator.ico", 23 | linkName: "apps/hindi-translator", 24 | date: "June 21, 2023", 25 | }, 26 | { 27 | name: "Chat GPT", 28 | imageUrl: "/images/apna-chat-gpt.png", 29 | imageLight: "/images/apna-chat-gpt-l.png", 30 | iconUrl: "/images/chat-gpt.ico", 31 | linkName: "apps/apna-chat-gpt", 32 | date: "June 22, 2023", 33 | }, 34 | { 35 | name: "News App", 36 | imageUrl: "/images/news-app.png", 37 | imageLight: "/images/news-app-l.png", 38 | iconUrl: "/images/news-app.ico", 39 | linkName: "apps/news-app", 40 | date: "June 23, 2023", 41 | }, 42 | ]; 43 | -------------------------------------------------------------------------------- /constants/BlogsData.js: -------------------------------------------------------------------------------- 1 | export const BlogsData = [ 2 | { 3 | name: "Why we should move in to Next js", 4 | imageUrl: 5 | "https://images.prismic.io/launchdarkly/6bfcaa10-40a3-42a5-9346-9e83d25cbeb4_What's%20So%20Great%20About%20Next.js.png?ixlib=gatsbyFP&auto=compress%2Cformat&fit=max&rect=0%2C0%2C4000%2C2252&w=2000&h=1126", 6 | linkName: "others/why-next", 7 | date: "Aprile 17, 2023", 8 | }, 9 | { 10 | name: "CSS transform property", 11 | imageUrl: 12 | "https://tenten.vn/tin-tuc/wp-content/uploads/2022/05/css_transform-4.png", 13 | linkName: "css/css-transform", 14 | date: "May 29, 2023", 15 | }, 16 | { 17 | name: "CSS background-blend-mode", 18 | imageUrl: 19 | "https://d33wubrfki0l68.cloudfront.net/a9e6f9b548512fc1e81455a6ca2d59e273d41bda/668f7/assets/images/blending-examples.png", 20 | linkName: "css/blend-mode", 21 | date: "May 30, 2023", 22 | }, 23 | { 24 | name: "CSS Rare Selectors", 25 | imageUrl: 26 | "https://internetingishard.netlify.app/css-selectors-1f0064.464e0c0e.png", 27 | linkName: "css/css-rare-selectors", 28 | date: "May 31, 2023", 29 | }, 30 | { 31 | name: "Hoisting In Javasript", 32 | imageUrl: 33 | "https://cdn.hashnode.com/res/hashnode/image/upload/v1612248117684/PTiy4Ga2n.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webpy", 34 | linkName: "javascript/Hoisting", 35 | date: "June 1, 2023", 36 | }, 37 | { 38 | name: "React Responsive carousel", 39 | imageUrl: 40 | "https://reactscript.com/wp-content/uploads/2016/07/React.js-Responsive-Carousel.png", 41 | linkName: "react/react-res-carousel", 42 | date: "June 2, 2023", 43 | }, 44 | { 45 | name: "CSS Animation", 46 | imageUrl: 47 | "https://res.cloudinary.com/practicaldev/image/fetch/s--rNSGibyc--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/i/54ydb37tzyny06ac8xdf.jpg", 48 | linkName: "css/css-animation", 49 | date: "June 5, 2023", 50 | }, 51 | { 52 | name: "object-fit", 53 | imageUrl: 54 | "https://webdesign-trends.net/wp/wp-content/uploads/2020/05/object-fit-tate02-1024x697.png", 55 | linkName: "css/object-fit", 56 | date: "June 6, 2023", 57 | }, 58 | { 59 | name: "linear-gradient", 60 | imageUrl: 61 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRxVjbf9Rf5VEHP_D6IiUYOksUi2OgEzhg2ny5DkeV5kA&usqp=CAU&ec=48600112", 62 | linkName: "css/linear-gradient", 63 | date: "June 7, 2023", 64 | }, 65 | { 66 | name: "How to send a email with attachment in node js", 67 | imageUrl: 68 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1IqjYMScfJK41xjyEnKWgYs2DgTON4QyWKkwQ3Qpmkw&usqp=CAU&ec=48600112", 69 | linkName: "others/send-email", 70 | date: "June 8, 2023", 71 | }, 72 | 73 | { 74 | name: "Drag And Drop", 75 | imageUrl: 76 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSvf3LxW2yGYlBT15yJsQmnXbGTSl-Q2_nKkZLJrvU2Hg&usqp=CAU&ec=48600112", 77 | linkName: "apps/drag-and-drop", 78 | date: "June 15, 2023", 79 | }, 80 | { 81 | name: "React Masonary", 82 | imageUrl: 83 | "https://reactjsexample.com/content/images/2018/11/React-Photo-Gallery.jpg", 84 | linkName: "react/react-masonary", 85 | date: "June 16, 2023", 86 | }, 87 | { 88 | name: "Css Grid", 89 | imageUrl: 90 | "https://www.freecodecamp.org/news/content/images/size/w2000/2022/05/CSS-GRID-3.png", 91 | linkName: "css/css-grid", 92 | date: "June 16, 2023", 93 | }, 94 | { 95 | name: "Deployment on Github Pages", 96 | imageUrl: 97 | "https://soshace.com/wp-content/uploads/2019/05/the-ultimate-guide-to-github-pages-main.jpg", 98 | linkName: "others/github-pages-deployment", 99 | date: "June 18, 2023", 100 | }, 101 | { 102 | name: "Readme file syntax", 103 | imageUrl: 104 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfYZKGMNHktg0e4wVK9TNS22qijcqvYg0QmJYp-Hp7Wg&usqp=CAU&ec=48600112", 105 | linkName: "others/readme", 106 | date: "June 19, 2023", 107 | }, 108 | { 109 | name: "Music Chalao", 110 | imageUrl: 111 | "https://thumbs.dreamstime.com/b/news-newspapers-folded-stacked-word-wooden-block-puzzle-dice-concept-newspaper-media-press-release-42301371.jpg", 112 | linkName: "apps/music-chalao", 113 | date: "June 25, 2023", 114 | }, 115 | { 116 | name: "Closure in Javascript", 117 | imageUrl: 118 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSxuSU_XV8gfjdse5Pl4LyDnVpmLvNEbjiii3yhgmLj_A&usqp=CAU&ec=48600112", 119 | linkName: "javascript/closure", 120 | date: "June 26, 2023", 121 | }, 122 | { 123 | name: "Debouncing in Javascript", 124 | imageUrl: 125 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQFNt-rL1StGYk10YCMxez5SnHolxHC82nsVrNyBDjcJw&usqp=CAU&ec=48600112", 126 | linkName: "javascript/debouncing", 127 | date: "June 27, 2023", 128 | }, 129 | { 130 | name: "Throttling in Javascript", 131 | imageUrl: 132 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSDXKGVPWZR3E56lLvZde0pb_uGNkq6A_UFQw&usqp=CAU", 133 | linkName: "javascript/throttling", 134 | date: "June 28, 2023", 135 | }, 136 | { 137 | name: "Rest and Spread Operator", 138 | imageUrl: 139 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1i7928wer2C-LN0mx0bdsp88row0sCsjREw&usqp=CAU", 140 | linkName: "javascript/spreadOperator", 141 | date: "June 29, 2023", 142 | }, 143 | { 144 | name: "Let Var and Const", 145 | imageUrl: 146 | "https://blogger.googleusercontent.com/img/a/AVvXsEjtvbXJQa3o7dsXB27ED6xiA2DlUTEG1eTDaT1wK_cUtLRwoMHBhTeNSimGv9v5d0Fh92nRW02lze1jjhP0CoSEgwdJ2zztMg0QMQuCZrOc4hHsBafBsinTRrkee7O1qcjEY5D5H5sQW-uapZX_DXxIpgtOAamuqtEQkKBiNEgIutlFy989AhyiuTWI=w1200-h630-p-k-no-nu", 147 | linkName: "javascript/letVarConst", 148 | date: "June 30, 2023", 149 | }, 150 | { 151 | name: "Component Life Cycle", 152 | imageUrl: 153 | "https://cdn-media-1.freecodecamp.org/images/1*_drMYY_IEgboMS4RhvC-lQ.png", 154 | linkName: "react/component-life-cycle", 155 | date: "July 3, 2023", 156 | }, 157 | { 158 | name: "useEffect in React", 159 | imageUrl: 160 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSbhezzFR6qB93F9NaClSY5oCFZ1wg4j0YQww&usqp=CAU", 161 | linkName: "react/useEffect", 162 | date: "July 4, 2023", 163 | }, 164 | { 165 | name: "useState in React", 166 | imageUrl: 167 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYTiTHUjDbI_QrgGMU6NWTtrjV161GoAzxUQ&usqp=CAU", 168 | linkName: "react/useState", 169 | date: "July 5, 2023", 170 | }, 171 | { 172 | name: "Virtual DOM in React", 173 | imageUrl: 174 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQYGau3eAtYMcIqqrHk2U1CR39SCnyhywjHA&usqp=CAU", 175 | linkName: "react/virtual-dom", 176 | date: "July 6, 2023", 177 | }, 178 | { 179 | name: "Fragment In React", 180 | imageUrl: 181 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT77S6c9Tlz-zqWRRPgKeJDd8kSjbR_alp30g&usqp=CAU", 182 | linkName: "react/fragment", 183 | date: "July 7, 2023", 184 | }, 185 | ]; 186 | -------------------------------------------------------------------------------- /constants/EducationData.js: -------------------------------------------------------------------------------- 1 | export const EducationData = [ 2 | { 3 | name: "Bachelor of Science", 4 | image: 5 | "http://res.cloudinary.com/dhixp5pnk/image/upload/v1696219056/edekjqivqlnsyg8pfmxw.png", 6 | schoolOrCollege: "GOVERNMENT COLLEGE, KOTA", 7 | fromTo: "2021 - 2022", 8 | statusOrPrecentage: "Dropped in second year", 9 | }, 10 | { 11 | name: "Senior Secondary Examination", 12 | image: 13 | "http://res.cloudinary.com/dhixp5pnk/image/upload/v1696219649/jkjfvdlxjntnyrxs57ia.png", 14 | schoolOrCollege: "SWAMI TEONRAM ALOK SR. SEC. SCHOOL DADABARI, KOTA", 15 | fromTo: "2021", 16 | statusOrPrecentage: "96.80 %", 17 | }, 18 | { 19 | name: "Secondary Examination", 20 | image: 21 | "http://res.cloudinary.com/dhixp5pnk/image/upload/v1696219649/tnverjapfr4slg7fnfcw.png", 22 | schoolOrCollege: "A.V.M. SECONDARY SCHOOL, RAWATBHATA", 23 | fromTo: "2019", 24 | statusOrPrecentage: "93.33%", 25 | }, 26 | ]; -------------------------------------------------------------------------------- /constants/ExperienceData.jsx: -------------------------------------------------------------------------------- 1 | export const ExperienceData = [ 2 | { 3 | companyName: "Good Tech MIND", 4 | location: "Kolkata, India", 5 | role: "MERN STACK INTERN", 6 | fromTo: "Aprile 2023 - June 2023", 7 | description: 8 | "In this internship, I worked on many projects, including an eCommerce application and a real-time chat system. Through this internship, I gained a strong command of Redux and Redux Toolkit. After completing this internship, I have gained the confidence and skills needed to develop a full-stack application for a real-world eCommerce site.", 9 | side: "left", 10 | }, 11 | { 12 | companyName: "MILLENNIA AHEAD TECHNOLIOIES", 13 | location: "Nagpur, India", 14 | role: "REACT JS INTERN", 15 | fromTo: "December 2022 - March 2023", 16 | description: 17 | "During this internship, we worked for a startup company to build an online salon appointment booking platform. In my first internship, I learned about version control tools like Git and GitHub. I spent a lot of time improving my skills in building UI and UX to advance my proficiency in CSS styling and JavaScript logic.", 18 | side: "right", 19 | }, 20 | ]; 21 | -------------------------------------------------------------------------------- /constants/JourneyData.js: -------------------------------------------------------------------------------- 1 | export const JourneyData = [ 2 | { 3 | heading: "School", 4 | time: "2015-2019", 5 | image: 6 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpCDvRmnjiBTgBd9WyPHlJHEPzRz2shaS3YQ&usqp=CAU", 7 | summary: 8 | "Topper during School time, A Mathematics Guy, Shy and Introverted personality, Always with Boyz friend Zone.", 9 | }, 10 | { 11 | heading: "IIT Preparation", 12 | time: "2019-2021", 13 | image: 14 | "https://www.besteducationsikar.com/wp-content/uploads/2021/11/2019-06-15-800x600.jpg", 15 | summary: 16 | "Because I was a topper during my school days, some of my friends suggested that I pursue IIT. Additionally, my father's friend recommended IIT to my father for me. As a result, I went to Kota for IIT preparation. However, after my first attempt, I decided to quit IIT.", 17 | }, 18 | { 19 | heading: "BSC College", 20 | time: "2021-2022", 21 | image: 22 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ3xSTnbK57kUx2XgDd_zzXJp5uXPSNUmeZ9g&usqp=CAUF", 23 | summary: 24 | "After quite IIT, again without reason i jumped to the BSC, I was trying to figure out what I wanted to do with my life and which career path to choose. However, by the end of my first year, I made the decision to enter the tech field, so I quit BSC after completing my first year exams.", 25 | }, 26 | { 27 | heading: "Coding Journey", 28 | time: "2022-Ongoing", 29 | image: 30 | "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbb0NTA9qMmGFF4NPZgMqebIfkPpOpK7TWlQ&usqp=CAU", 31 | summary: 32 | "I started exploring coding and programming through YouTube and realized that I could learn many things for free. This, along with my belief in prioritizing skills over certificates or college degrees, led me to decide not to join a BCA college or pay for courses.", 33 | }, 34 | { 35 | heading: "First Internship", 36 | time: "1 dec 2022 to 15 march 2023", 37 | summary: ( 38 |
39 | {" "} 40 |

41 | Company : Millennia Ahead Technology pvt. ltd. (Nagpur, Maharashtra) 42 |

43 |

Mode : Remote (Work From Home)

I obtained my first internship 44 | after learning coding from YouTube in 5 months. Essentially, it is a 45 | startup-based company where all team members, including myself, are 46 | working on an online salon appointment booking application. This is my 47 | first experience with a real-world project, and I have learned a lot 48 | from it. Primarily, I learned frontend design and the functionality of 49 | dynamic applications, Redux, reactstrap, as well as how a team 50 | collaborates on a single project, including code merging using Git and 51 | GitHub. 52 |
53 | ), 54 | }, 55 | { 56 | heading: "Second Internship", 57 | time: "24 Apr 2023 to 10 July 2022", 58 | summary: ( 59 |
60 |

Company : Good Tech Mind (Kolkata, West Benal)

61 |

Mode : Remote (Work From Home)

62 | After completing my first internship, I wanted to pursue an offline 63 | intern job. So, I went for more than 5 interviews in two months. It was 64 | a little challenging to get shortlisted for interviews because I focused 65 | on learning web development and the mathematics involved. As a result, I 66 | didn't create many projects to showcase and was not aware of GitHub. 67 | Subsequently, I joined a remote non-paid internship that would pay me 68 | after two months. However, due to a lack of response and slow progress, 69 | my trust was broken, and I quit the internship. Nevertheless, I worked 70 | on three full-stack projects during that time, which boosted my 71 | confidence to undertake and complete any project using the MERN stack. 72 |
73 | ), 74 | }, 75 | ]; 76 | -------------------------------------------------------------------------------- /constants/NavbarData.js: -------------------------------------------------------------------------------- 1 | import { AiTwotoneHome } from "react-icons/ai"; 2 | import { FaLaptopCode } from "react-icons/fa"; 3 | import { GiRailRoad } from "react-icons/gi"; 4 | import { CgClapperBoard } from "react-icons/cg"; 5 | import { BsPenFill } from "react-icons/bs"; 6 | import { IoMdAppstore } from "react-icons/io"; 7 | 8 | export const NavbarData = [ 9 | { 10 | name: "Home", 11 | link: "#home", 12 | icon: 13 | }, 14 | { 15 | name: "Skills", 16 | link: "#skills", 17 | icon: 18 | }, 19 | { 20 | name: "Projects", 21 | link: "#projects", 22 | icon: 23 | }, 24 | { 25 | name: "Blogs", 26 | link: "#blogs", 27 | icon: 28 | }, 29 | { 30 | name: "My Journey", 31 | link: "#myJourney", 32 | icon: 33 | }, 34 | { 35 | name: "apps", 36 | link: "#apps", 37 | icon: 38 | } 39 | ] -------------------------------------------------------------------------------- /constants/ProjectsData.js: -------------------------------------------------------------------------------- 1 | export const ProjectsData = [ 2 | { 3 | projectName: "Shovee : Personal Portfolio Generator", 4 | liveUrl: "https://shovee.com", 5 | githubUrl: "https://github.com/iamshiv007/shovee", 6 | projectImage: { 7 | imageUrl: "http://res.cloudinary.com/dqfrtazgi/image/upload/v1696218285/yn3naeznjfgszsbbjr92.png" 8 | }, 9 | techs: ["NextJS", "TailwindCSS", "Redux Toolkit", "Cloudinary", "Intersection Objerver"] 10 | }, 11 | { 12 | projectName: "YouTube clone", 13 | liveUrl: "https://youtube-clone-shivraj.vercel.app", 14 | githubUrl: "https://github.com/iamshiv007/yotube-clone", 15 | projectImage: { 16 | imageUrl: "http://res.cloudinary.com/dqfrtazgi/image/upload/v1696218286/t1zjvlwogccwit9888w7.png" 17 | }, 18 | techs: ["ReactJS", "ContextAPI", "ChakraUI", "YoutubeAPI", "ContextAPI"] 19 | }, 20 | { 21 | projectName: "Eccommerce Application", 22 | liveUrl: "https://ecommerce-application-shivraj.vercel.app", 23 | githubUrl: "https://github.com/iamshiv007/ecommerce-frontend", 24 | projectImage: { 25 | imageUrl: "http://res.cloudinary.com/dqfrtazgi/image/upload/v1696220173/lnnt6nmesjvvmo3nx9ep.png" 26 | }, 27 | techs: ["ReactJS", "NodeJS", "Express", "MongoDB", "Redux Toolkit"] 28 | } 29 | ] -------------------------------------------------------------------------------- /constants/SkillsData.js: -------------------------------------------------------------------------------- 1 | import { AiFillHtml5 } from "react-icons/ai"; 2 | import { 3 | SiNodedotjs, 4 | SiNextdotjs, 5 | SiVercel, 6 | SiNetlify, 7 | SiExpress, 8 | SiRedux, 9 | SiTailwindcss, 10 | SiMui, 11 | SiChakraui, 12 | SiFirebase, 13 | SiTypescript, 14 | SiJquery 15 | } from "react-icons/si"; 16 | import { DiJavascript1, DiReact, DiMongodb, DiSass } from "react-icons/di"; 17 | import { BsGit, BsGithub } from "react-icons/bs"; 18 | import { FaBootstrap, FaCss3Alt, FaAngular, FaPhp, FaShopify, FaJava } from "react-icons/fa"; 19 | import { TbBrandReactNative } from "react-icons/tb"; 20 | import { GrMysql } from "react-icons/gr"; 21 | 22 | export const TechStackData = [ 23 | { 24 | Advance: [ 25 | { 26 | name: "ReactJS", 27 | icon: , 28 | }, 29 | { 30 | name: "JavaScript", 31 | icon: , 32 | }, 33 | { 34 | name: "Redux-toolkit", 35 | icon: , 36 | }, 37 | { 38 | name: "HTML5", 39 | icon: , 40 | }, 41 | { 42 | name: "CSS3", 43 | icon: , 44 | }, 45 | { 46 | name: "Bootstrap", 47 | icon: , 48 | }, 49 | { 50 | name: "Tailwind CSS", 51 | icon: , 52 | }, 53 | { 54 | name: "Meterial UI", 55 | icon: , 56 | }, 57 | { 58 | name: "Chakra UI", 59 | icon: 60 | }, 61 | { 62 | name: "Vercel", 63 | icon: 64 | }, 65 | { 66 | name: "Github", 67 | icon: 68 | }, 69 | ], 70 | Good: [ 71 | { 72 | name: "NextJS", 73 | icon: 74 | }, 75 | { 76 | name: "NodeJS", 77 | icon: , 78 | }, 79 | { 80 | name: "Express", 81 | icon: , 82 | }, 83 | { 84 | name: "MongoDB", 85 | icon: , 86 | }, 87 | { 88 | name: "firebase", 89 | icon: 90 | }, 91 | { 92 | name: "jQuery", 93 | icon: 94 | }, 95 | { 96 | name: "netlify", 97 | icon: 98 | }, 99 | { 100 | name: "Git", 101 | icon: 102 | }, 103 | 104 | ], 105 | Familiar: [ 106 | { 107 | name: "TypeScript", 108 | icon: 109 | }, 110 | { 111 | name: "Angular", 112 | icon: 113 | }, 114 | { 115 | name: "React Native", 116 | icon: 117 | }, 118 | { 119 | name: "PHP", 120 | icon: 121 | }, 122 | { 123 | name: "JAVA", 124 | icon: 125 | }, 126 | { 127 | name: "SASS", 128 | icon: , 129 | }, 130 | { 131 | name: "MySQL", 132 | icon: 133 | }, 134 | { 135 | name: "Shopify", 136 | icon: 137 | } 138 | ] 139 | 140 | } 141 | ] -------------------------------------------------------------------------------- /constants/SocialMediaData.js: -------------------------------------------------------------------------------- 1 | import { AiOutlineInstagram } from "react-icons/ai"; 2 | import { BsGithub } from "react-icons/bs"; 3 | import { FaLinkedinIn } from "react-icons/fa"; 4 | import { IoClose } from "react-icons/io5"; 5 | 6 | export const SocialMediaData = [ 7 | { 8 | icon: , 9 | color: 10 | "linear-gradient(135deg, #833AB4, #C13584, #E1306C, #FD1D1D, #F56040, #FFDC80)", 11 | link: "https://www.instagram.com/iam_shiv_726", 12 | }, 13 | { 14 | icon: , 15 | color: "#0f0f0f", 16 | link: "https://twitter.com/ShivrajGurjar15", 17 | }, 18 | { 19 | icon: , 20 | color: "#0072b1", 21 | link: "https://www.linkedin.com/in/shivraj-dev", 22 | }, 23 | { 24 | icon: , 25 | color: "#171515", 26 | link: "https://www.github.com/iamshiv007", 27 | }, 28 | ]; 29 | -------------------------------------------------------------------------------- /constants/index.js: -------------------------------------------------------------------------------- 1 | import { AppsData } from "./AppsData"; 2 | import { BlogsData } from "./BlogsData"; 3 | import { NewsData } from "./NewsData"; 4 | import { SkillsData } from "./SkillsData"; 5 | import { JourneyData } from "./JourneyData"; 6 | import { ProjectsData } from "./ProjectsData"; 7 | 8 | export { AppsData, BlogsData, NewsData, SkillsData, JourneyData, ProjectsData } -------------------------------------------------------------------------------- /context/themeContext.js: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useState, createContext, useEffect } from "react"; 3 | 4 | export const ThemeContext = createContext(); 5 | 6 | const ThemeProvider = ({ children }) => { 7 | const [theme, setTheme] = useState("dark"); 8 | 9 | // Toggle Theme 10 | const setThemeFun = () => { 11 | if (theme === "dark") { 12 | setTheme("light"); 13 | localStorage.setItem("myPortfolioProfileTheme", "light"); 14 | } else { 15 | setTheme("dark"); 16 | localStorage.setItem("myPortfolioProfileTheme", "dark"); 17 | } 18 | }; 19 | 20 | // Get Theme Value From LocalStorage 21 | useEffect(() => { 22 | const getTheme = localStorage.getItem("myPortfolioProfileTheme"); 23 | if (!getTheme) { 24 | return 25 | } 26 | setTheme(getTheme); 27 | }, []); 28 | 29 | return ( 30 | 31 |
32 |
{children}
33 |
34 | 35 | ); 36 | }; 37 | 38 | export default ThemeProvider; -------------------------------------------------------------------------------- /contextApi/PortfolioContext.jsx: -------------------------------------------------------------------------------- 1 | const { useState, createContext } = require("react"); 2 | 3 | export const PortfolioContext = createContext(); 4 | 5 | export const PortfolioProvider = ({ children }) => { 6 | const [dark, setDark] = useState(true); 7 | const [showModal, setShowModal] = useState(false); 8 | 9 | return ( 10 | 13 | {children} 14 | 15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /database/connect.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose" 2 | 3 | export const connectDb = async () => { 4 | 5 | try { 6 | await mongoose.connect(process.env.NEXT_PUBLIC_MONGODB_CONNECTION_STRING) 7 | console.log("Database Connected") 8 | 9 | } catch (error) { 10 | console.log(error) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /layout/footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | const Footer = () => { 4 | return ( 5 | 6 |
7 | @Shiv 2023 8 |
9 | 10 | ); 11 | }; 12 | 13 | export default Footer; 14 | -------------------------------------------------------------------------------- /layout/navbar/Navbar.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { Fragment, useContext, useEffect, useState } from "react"; 3 | import Link from "next/link"; 4 | import { DiTechcrunch } from "react-icons/di"; 5 | import { BsFillLightningChargeFill } from "react-icons/bs"; 6 | import { TbBulbFilled } from "react-icons/tb"; 7 | 8 | import MobileNavbar from "./SidebarMobile"; 9 | import { NavbarMenu } from "./NavbarItems"; 10 | import NavbarMobile from "./NavbarMobile"; 11 | 12 | import { ThemeContext } from "@/context/themeContext"; 13 | 14 | const Navbar = () => { 15 | const [top, setTop] = useState("0"); 16 | const [showMenu, setShowMenu] = useState(false); 17 | 18 | const { setThemeFun, theme } = useContext(ThemeContext); 19 | 20 | // Logic for Navbar Hide and Show on scrolling behaviour 21 | useEffect(() => { 22 | let prevScrollPos = window.scrollY; 23 | 24 | const handleScroll = () => { 25 | const currentScrollPos = window.scrollY; 26 | 27 | if (prevScrollPos > currentScrollPos) { 28 | setTop("0"); // Show the navbar 29 | } else { 30 | setTop("-80px"); // Hide the navbar 31 | } 32 | 33 | prevScrollPos = currentScrollPos; 34 | }; 35 | 36 | window.addEventListener("scroll", handleScroll); 37 | return () => { 38 | // Cleanup: Remove the event listener when the component unmounts 39 | window.removeEventListener("scroll", handleScroll); 40 | }; 41 | }, []); 42 | 43 | return ( 44 | 45 | {/* Desktop Header */} 46 |
50 | {/* Name Logo */} 51 |

52 | SHIV 53 |

54 |
55 | {/* Navbar Links */} 56 | {NavbarMenu.map((navbar) => ( 57 | 62 |
63 | {navbar.name} 64 |
65 | 66 | ))} 67 |
68 | {/* Toggle Theme button */} 69 |
70 | 80 |
81 |
82 | 83 | {/* Mobile Header */} 84 | 91 | 92 | {/* SideMenu For Mobile Screen */} 93 | 94 | 95 | ); 96 | }; 97 | 98 | export default Navbar; 99 | -------------------------------------------------------------------------------- /layout/navbar/NavbarItems.js: -------------------------------------------------------------------------------- 1 | export const NavbarMenu = [ 2 | { 3 | name: "Home", 4 | link: "#home", 5 | }, 6 | { 7 | name: "About", 8 | link: "#about", 9 | }, 10 | { 11 | name: "Tech Stack", 12 | link: "#techStack", 13 | }, 14 | { 15 | name: "Education", 16 | link: "#education", 17 | }, 18 | { 19 | name: "Experience", 20 | link: "#experience", 21 | }, 22 | { 23 | name: "Project", 24 | link: "#project", 25 | }, 26 | ]; -------------------------------------------------------------------------------- /layout/navbar/NavbarMobile.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { DiTechcrunch } from "react-icons/di"; 3 | import { BsFillLightningChargeFill } from "react-icons/bs"; 4 | import { TbBulbFilled } from "react-icons/tb"; 5 | import { GiHamburgerMenu } from "react-icons/gi"; 6 | 7 | const NavbarMobile = ({ setShowMenu, setThemeFun, theme, showMenu, top }) => { 8 | return ( 9 | // Mobile Header 10 |
14 |
15 | {/* Open Sidebar Button */} 16 | 22 | 23 | {/* Name Logo */} 24 |

25 | SHIV 26 |

27 |
28 | 29 | {/* Toggle Theme Button */} 30 |
31 | 37 |
38 |
39 | ); 40 | }; 41 | 42 | export default NavbarMobile; 43 | -------------------------------------------------------------------------------- /layout/navbar/SidebarMobile.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Link from "next/link"; 3 | import { IoMdClose } from "react-icons/io"; 4 | import { DiTechcrunch } from "react-icons/di"; 5 | 6 | import { NavbarMenu } from "./NavbarItems"; 7 | 8 | const MobileNavbar = ({ showMenu, setShowMenu }) => { 9 | return ( 10 | 11 |
setShowMenu(!showMenu)} 16 | > 17 | {/* Sidebar */} 18 |
23 |
24 | {/* Name Logo */} 25 |
26 |
27 | S 28 |
29 |

30 | SHIV 31 |

32 |
33 | 34 | {/* Sidebar Close button */} 35 | 41 |
42 | 43 |
44 | {/* Navbar Links */} 45 | {NavbarMenu.map((navbar) => ( 46 | 51 | {navbar.name} 52 | 53 | ))} 54 |
55 |
56 |
57 | 58 | ); 59 | }; 60 | 61 | export default MobileNavbar; 62 | -------------------------------------------------------------------------------- /models/feedback.js: -------------------------------------------------------------------------------- 1 | const { default: mongoose } = require("mongoose"); 2 | 3 | const feedbackSchema = new mongoose.Schema({ 4 | name: { 5 | type: String, 6 | required: true 7 | }, 8 | email: { 9 | type: String, 10 | }, 11 | rating: { 12 | type: Number, 13 | required: true 14 | }, 15 | good: { 16 | type: String, 17 | }, 18 | bad: { 19 | type: String, 20 | }, 21 | suggetion: { 22 | type: String, 23 | }, 24 | }) 25 | 26 | mongoose.models = {}; 27 | 28 | export const Feedback = mongoose.model("feedback", feedbackSchema) -------------------------------------------------------------------------------- /models/mail.js: -------------------------------------------------------------------------------- 1 | const { default: mongoose } = require("mongoose"); 2 | 3 | const mailSchema = new mongoose.Schema({ 4 | name: { 5 | type: String, 6 | required: true 7 | }, 8 | email: { 9 | type: String, 10 | required: true 11 | }, 12 | subject: { 13 | type: String, 14 | required: true 15 | }, 16 | message: { 17 | type: String, 18 | required: true 19 | }, 20 | }) 21 | 22 | mongoose.models = {}; 23 | 24 | export const Mail = mongoose.model("mail", mailSchema) -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | images: { 5 | domains: ["encrypted-tbn0.gstatic.com", "scontent.fjdh1-1.fna.fbcdn.net", "www.besteducationsikar.com", "cdn-media-1.freecodecamp.org", "thumbs.dreamstime.com", "soshace.com", "next.config.js", "images.prismic.io", "d33wubrfki0l68.cloudfront.net", "cdn.hashnode.com", "res.cloudinary.com", "www.freecodecamp.org", "blogger.googleusercontent.com", "tenten.vn", "internetingishard.netlify.app", "reactscript.com", "webdesign-trends.net", "reactjsexample.com", "vercel.com", "nextjs.org", "http://res.cloudinary.com"] 6 | }, 7 | eslint: { 8 | ignoreDuringBuilds: true, 9 | } 10 | } 11 | 12 | module.exports = nextConfig 13 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "first-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@vercel/analytics": "^1.0.2", 13 | "axios": "^1.4.0", 14 | "framer-motion": "^10.12.18", 15 | "he": "^1.2.0", 16 | "mongoose": "^7.4.0", 17 | "next": "^13.3.0", 18 | "nodemailer": "^6.9.4", 19 | "react": "^18.2.0", 20 | "react-dom": "^18.2.0", 21 | "react-ga4": "^2.1.0", 22 | "react-icons": "^4.9.0", 23 | "react-responsive-carousel": "^3.2.23", 24 | "react-responsive-masonry": "^2.1.7", 25 | "react-syntax-highlighter": "^15.5.0" 26 | }, 27 | "devDependencies": { 28 | "autoprefixer": "^10.4.14", 29 | "eslint": "8.47.0", 30 | "eslint-config-next": "13.4.16", 31 | "postcss": "^8.4.24", 32 | "tailwindcss": "^3.3.2" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /pages/_app.js: -------------------------------------------------------------------------------- 1 | import "@/styles/globals.css" 2 | import "@/styles/animation.css" 3 | import "@/styles/cssGrid.css" 4 | import "@/styles/Home.module.css" 5 | import { Analytics } from "@vercel/analytics/react" 6 | import ReactGA from "react-ga4"; 7 | 8 | import { PortfolioProvider } from "@/contextApi/PortfolioContext" 9 | import ThemeProvider from "@/context/themeContext" 10 | 11 | ReactGA.initialize(process.env.NEXT_PUBLIC_MEASUREMENT_ID); 12 | 13 | 14 | export default function App({ Component, pageProps }) { 15 | 16 | return ( 17 | 18 | 19 | 20 | 21 | 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from "next/document" 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /pages/api/chatgpt.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export default async function handler(req, res) { 4 | 5 | try { 6 | 7 | const { query } = req.query 8 | 9 | if (req.method !== "POST") return res.send({ success: false, message: `${req.method} Method Not Allowed` }) 10 | 11 | const options = { 12 | method: "POST", 13 | url: "https://chatgpt-api8.p.rapidapi.com/", 14 | headers: { 15 | "content-type": "application/json", 16 | "X-RapidAPI-Key": process.env.RAPID_API_KEY, 17 | "X-RapidAPI-Host": "chatgpt-api8.p.rapidapi.com", 18 | }, 19 | data: [ 20 | { 21 | content: query, 22 | role: "user", 23 | }, 24 | ], 25 | }; 26 | 27 | const { data } = await axios.request(options) 28 | 29 | res.send({ success: true, answer: data.text }) 30 | 31 | } catch (error) { 32 | res.send({ success: false, message: error?.response?.data?.messaege || error }) 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /pages/api/feedback/new.js: -------------------------------------------------------------------------------- 1 | import { connectDb } from "@/database/connect"; 2 | import { Feedback } from "@/models/feedback"; 3 | 4 | export default async function handler(req, res) { 5 | if (req.method === "POST") { 6 | 7 | const { name, rating } = req.body 8 | 9 | if (!name || !rating) return res.status(400).json({ success: false, message: "Name and Rating Required?" }) 10 | 11 | try { 12 | connectDb() 13 | const feedback = await Feedback.create(req.body) 14 | 15 | res.status(200).json({ success: true, message: "Thanks for Your Feedback", feedback }); 16 | } catch (error) { 17 | console.error("Error sending email:", error); 18 | res.status(500).json({ success: false, message: error.response.data.message || error.message || "" }); 19 | } 20 | } else { 21 | res.status(405).json({ error: "Method not allowed" }); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /pages/api/mail/new.js: -------------------------------------------------------------------------------- 1 | // pages/api/send-email.js 2 | import nodemailer from "nodemailer"; 3 | 4 | import { connectDb } from "@/database/connect"; 5 | import { Mail } from "@/models/mail"; 6 | 7 | export default async function handler(req, res) { 8 | if (req.method === "POST") { 9 | 10 | const { name, email, subject, message } = req.body; 11 | 12 | // Replace these with your actual email service settings 13 | const transporter = nodemailer.createTransport({ 14 | service: "Gmail", 15 | auth: { 16 | user: process.env.FROM_EMAIL_ADDRESS, 17 | pass: process.env.FROM_EMAIL_PASS, 18 | }, 19 | }); 20 | 21 | const mailOptions = { 22 | from: process.env.FROM_EMAIL_ADDRESS, 23 | to: process.env.TO_EMAIL_PASS, 24 | subject, 25 | text: `name = ${name}, email = ${email}, message = ${message}` 26 | }; 27 | 28 | try { 29 | await transporter.sendMail(mailOptions); 30 | 31 | connectDb() 32 | const mail = await Mail.create(req.body) 33 | 34 | res.status(200).json({ success: true, message: "Email sent successfully", mail }); 35 | } catch (error) { 36 | console.error("Error sending email:", error); 37 | res.status(500).json({ error: "An error occurred while sending the email" }); 38 | } 39 | } else { 40 | res.status(405).json({ error: "Method not allowed" }); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /pages/api/masonary.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export default async function handler(req, res) { 4 | 5 | try { 6 | 7 | const config = { 8 | headers: { 9 | Authorization: process.env.PEXELS_API_KEY 10 | }, 11 | }; 12 | 13 | if (req.method !== "GET") return res.send({ success: false, message: `${req.method} Method Not Allowed` }) 14 | 15 | const url = `https://api.pexels.com/v1/curated?page=${1}`; 16 | 17 | const { data } = await axios.get(url, config) 18 | 19 | res.send({ success: true, photos: data.photos }) 20 | 21 | } catch (error) { 22 | res.send({ success: false, message: error?.response?.data?.messaege || error.message || error }) 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /pages/api/news.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export default async function handler(req, res) { 4 | 5 | try { 6 | 7 | const { category, lang, country, max } = req.query 8 | 9 | if (req.method !== "GET") return res.send({ success: false, message: `${req.method} Method Not Allowed` }) 10 | 11 | const apikey = process.env.GOOGLE_NEWS_API_KEY; 12 | 13 | const url = `https://gnews.io/api/v4/top-headlines?category=${category}&lang=${lang}&country=${country}&max=${max}&apikey=` + apikey; 14 | 15 | const { data } = await axios.get(url) 16 | 17 | res.send({ success: true, articles: data.articles }) 18 | 19 | } catch (error) { 20 | res.send({ success: false, message: error?.response?.data?.messaege || error.message || error }) 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /pages/api/translate.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | export default async function handler(req, res) { 4 | 5 | try { 6 | 7 | const { text, language } = req.query 8 | 9 | if (req.method !== "POST") return res.send({ success: false, message: `${req.method} Method Not Allowed` }) 10 | 11 | const options = { 12 | method: "POST", 13 | url: "https://microsoft-translator-text.p.rapidapi.com/translate", 14 | params: { 15 | "to[0]": language, 16 | "api-version": "3.0", 17 | profanityAction: "NoAction", 18 | textType: "plain", 19 | }, 20 | headers: { 21 | "content-type": "application/json", 22 | "X-RapidAPI-Key": process.env.RAPID_API_KEY, 23 | "X-RapidAPI-Host": "microsoft-translator-text.p.rapidapi.com", 24 | }, 25 | data: [ 26 | { 27 | Text: text, 28 | }, 29 | ], 30 | }; 31 | 32 | const { data } = await axios.request(options) 33 | 34 | res.send({ success: true, translatedText: data[0].translations[0].text }) 35 | 36 | } catch (error) { 37 | res.send({ success: false, message: error?.response?.data?.messaege || error }) 38 | } 39 | 40 | } 41 | -------------------------------------------------------------------------------- /pages/apps/apna-chat-gpt.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState } from "react"; 2 | import Head from "next/head"; 3 | import axios from "axios"; 4 | 5 | import Theme from "@/utils/Theme"; 6 | import BackTo from "@/components/buttons/BackTo"; 7 | 8 | const ApnaChatGpt = () => { 9 | const [question, setQuestion] = useState(""); 10 | const [loading, setLoading] = useState(false); 11 | const [questionPreview, setQuestionPreview] = useState(""); 12 | const [answer, setAnswer] = useState(); 13 | const [history, setHistory] = useState([]); 14 | 15 | const enterHit = (e) => { 16 | if (e.key === "Enter") { 17 | generateAnswer(); 18 | } 19 | }; 20 | 21 | const generateAnswer = async () => { 22 | try { 23 | setLoading(true); 24 | setQuestionPreview(question); 25 | setQuestion(""); 26 | setAnswer(""); 27 | const { data } = await axios.post(`/api/chatgpt?query=${question}`); 28 | if (!data.success) { 29 | alert(data.message); 30 | setLoading(false); 31 | return; 32 | } 33 | setLoading(false); 34 | setAnswer(data.answer); 35 | setHistory([{ question, answer: data.answer }, ...history]); 36 | console.log(data.answer); 37 | } catch (error) { 38 | console.log(error); 39 | alert(error?.response?.data?.message || error); 40 | } 41 | }; 42 | 43 | return ( 44 | 45 | 46 | Apna-Chat-Gpt 47 | 48 | 49 | 50 | 51 | 52 |
53 |

Apna-Chat-Gpt

54 |
55 |
56 | setQuestion(e.target.value)} 61 | onKeyDown={enterHit} 62 | placeholder="Ask any question..." 63 | type="text" 64 | value={question} 65 | /> 66 |
67 | 68 |
69 | {questionPreview && ( 70 |
71 | {" "} 72 |

Q. {questionPreview}

73 |

{loading ? "Generating..." : "Ans => " + answer}

74 |
75 | )} 76 | 77 | {answer !== "" 78 | ? history 79 | .filter((data, key) => key !== 0) 80 | .map((data, key) => ( 81 |
82 |

{"Q. " + data.question}

83 |
{"Ans => " + data.answer}
84 |
85 | )) 86 | : history.map((data, key) => ( 87 |
88 |

{"Q. " + data.question}

89 |
{"Ans => " + data.answer}
90 |
91 | ))} 92 |
93 |
94 | 95 |
96 | 102 |
103 |
104 | 105 | 106 | ); 107 | }; 108 | 109 | export default ApnaChatGpt; 110 | -------------------------------------------------------------------------------- /pages/apps/hindi-translator.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState } from "react"; 2 | import Head from "next/head"; 3 | import axios from "axios"; 4 | 5 | import Theme from "@/utils/Theme"; 6 | import BackTo from "@/components/buttons/BackTo"; 7 | 8 | const HindiTranslator = () => { 9 | const [text, setText] = useState(""); 10 | const [language, setLanguage] = useState("hi"); 11 | const [output, setOutput] = useState(""); 12 | const [loading, setLoading] = useState(false); 13 | 14 | const translateFun = async () => { 15 | try { 16 | setLoading(true); 17 | const { data } = await axios.post( 18 | `/api/translate?text=${text}&language=${language}` 19 | ); 20 | if (!data.success) { 21 | alert(data.message); 22 | setLoading(false); 23 | return; 24 | } 25 | setLoading(false); 26 | console.log(data.translatedText); 27 | setOutput(data.translatedText); 28 | } catch (error) { 29 | console.error(error); 30 | } 31 | }; 32 | 33 | return ( 34 | 35 | 36 | Hindi-Translator 37 | 38 | 39 | 40 | 41 | 42 |
43 |

44 | Hindi Translator 45 |

46 | 47 |
48 |
49 |