├── styles ├── Home.module.css ├── animation.css ├── cssGrid.css └── globals.css ├── public ├── favicon.ico ├── images │ ├── x.png │ ├── hii.png │ ├── male.png │ ├── room.jpg │ ├── circle.png │ ├── screen1.png │ ├── screen2.png │ ├── carousel1.png │ ├── carousel2.png │ ├── carousel3.png │ ├── cartoon 0.png │ ├── chat-gpt.ico │ ├── developer.png │ ├── ecommerce.png │ ├── news-app.ico │ ├── news-app.png │ ├── quiz-app.ico │ ├── quiz-app.png │ ├── news-app-l.png │ ├── quiz-app-l.png │ ├── tic-tac-toe.ico │ ├── tic-tac-toe.png │ ├── apna-chat-gpt.png │ ├── tic-tac-toe-l.png │ ├── welcome-screen.png │ ├── youtube-clone.png │ ├── admin-dashboard.png │ ├── apna-chat-gpt-l.png │ ├── hindi-translator.ico │ ├── hindi-translator.png │ ├── salon-application.png │ └── hindi-translator-l.png ├── vercel.svg └── next.svg ├── jsconfig.json ├── Screenshot 2023-08-06 131904.png ├── postcss.config.js ├── pages ├── blogs │ ├── react │ │ ├── drag-and-drop.jsx │ │ ├── virtual-dom.jsx │ │ ├── react-masonary.jsx │ │ ├── useEffect.jsx │ │ ├── useState.jsx │ │ └── react-res-carousel.jsx │ ├── css │ │ ├── blend-mode.jsx │ │ ├── object-fit.jsx │ │ ├── css-animation.jsx │ │ ├── css-grid.jsx │ │ ├── css-rare-selectors.jsx │ │ ├── linear-gradient.jsx │ │ └── css-transform.jsx │ ├── javascript │ │ ├── debouncing.jsx │ │ ├── throttling.jsx │ │ └── Hoisting.jsx │ └── others │ │ ├── github-pages-deployment.jsx │ │ └── readme.jsx ├── _document.js ├── _app.js ├── api │ ├── masonary.js │ ├── news.js │ ├── feedback │ │ └── new.js │ ├── chatgpt.js │ ├── translate.js │ └── mail │ │ └── new.js ├── apps │ ├── music-chalao.jsx │ ├── hindi-translator.jsx │ ├── apna-chat-gpt.jsx │ ├── quiz-app.jsx │ └── tic-tac-toe.jsx ├── blogs.jsx └── index.js ├── database └── connect.js ├── layout ├── footer │ └── Footer.jsx └── navbar │ ├── NavbarItems.js │ ├── NavbarMobile.jsx │ ├── SidebarMobile.jsx │ └── Navbar.jsx ├── constants ├── index.js ├── SocialMediaData.js ├── NavbarData.js ├── EducationData.js ├── ExperienceData.jsx ├── AppsData.js ├── ProjectsData.js ├── JourneyData.js ├── SkillsData.js └── BlogsData.js ├── sections ├── journeyParts │ ├── index.js │ ├── YouTube.jsx │ ├── College.jsx │ ├── School.jsx │ ├── Iit.jsx │ ├── FirstInternship.jsx │ └── SecondInternship.jsx ├── LatestBlogs.jsx ├── Apps.jsx ├── education.jsx ├── Intro.jsx ├── Skills.jsx ├── Projects.jsx ├── about.jsx └── experience.jsx ├── utils ├── Theme.jsx ├── Resume.jsx ├── ChatSystem.jsx ├── SocialMedia.jsx ├── ShoveeModal.jsx ├── SendMail.jsx └── Feedback.jsx ├── tailwind.config.js ├── contextApi └── PortfolioContext.jsx ├── .gitignore ├── models ├── mail.js └── feedback.js ├── .eslintrc.json ├── components └── buttons │ ├── AnimatedButton.jsx │ └── BackTo.jsx ├── next.config.js ├── package.json ├── blogList.txt ├── LICENSE └── context └── themeContext.js /styles/Home.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/images/x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/x.png -------------------------------------------------------------------------------- /public/images/hii.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/hii.png -------------------------------------------------------------------------------- /public/images/male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/male.png -------------------------------------------------------------------------------- /public/images/room.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/room.jpg -------------------------------------------------------------------------------- /public/images/circle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/circle.png -------------------------------------------------------------------------------- /public/images/screen1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/screen1.png -------------------------------------------------------------------------------- /public/images/screen2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/screen2.png -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /public/images/carousel1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/carousel1.png -------------------------------------------------------------------------------- /public/images/carousel2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/carousel2.png -------------------------------------------------------------------------------- /public/images/carousel3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/carousel3.png -------------------------------------------------------------------------------- /public/images/cartoon 0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/cartoon 0.png -------------------------------------------------------------------------------- /public/images/chat-gpt.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/chat-gpt.ico -------------------------------------------------------------------------------- /public/images/developer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/developer.png -------------------------------------------------------------------------------- /public/images/ecommerce.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/ecommerce.png -------------------------------------------------------------------------------- /public/images/news-app.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/news-app.ico -------------------------------------------------------------------------------- /public/images/news-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/news-app.png -------------------------------------------------------------------------------- /public/images/quiz-app.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/quiz-app.ico -------------------------------------------------------------------------------- /public/images/quiz-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/quiz-app.png -------------------------------------------------------------------------------- /public/images/news-app-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/news-app-l.png -------------------------------------------------------------------------------- /public/images/quiz-app-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/quiz-app-l.png -------------------------------------------------------------------------------- /public/images/tic-tac-toe.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/tic-tac-toe.ico -------------------------------------------------------------------------------- /public/images/tic-tac-toe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/tic-tac-toe.png -------------------------------------------------------------------------------- /Screenshot 2023-08-06 131904.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/Screenshot 2023-08-06 131904.png -------------------------------------------------------------------------------- /public/images/apna-chat-gpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/apna-chat-gpt.png -------------------------------------------------------------------------------- /public/images/tic-tac-toe-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/tic-tac-toe-l.png -------------------------------------------------------------------------------- /public/images/welcome-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/welcome-screen.png -------------------------------------------------------------------------------- /public/images/youtube-clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/youtube-clone.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | } 6 | } -------------------------------------------------------------------------------- /public/images/admin-dashboard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/admin-dashboard.png -------------------------------------------------------------------------------- /public/images/apna-chat-gpt-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/apna-chat-gpt-l.png -------------------------------------------------------------------------------- /public/images/hindi-translator.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/hindi-translator.ico -------------------------------------------------------------------------------- /public/images/hindi-translator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/hindi-translator.png -------------------------------------------------------------------------------- /public/images/salon-application.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/salon-application.png -------------------------------------------------------------------------------- /public/images/hindi-translator-l.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iamshiv007/NextJS-Portfolio/HEAD/public/images/hindi-translator-l.png -------------------------------------------------------------------------------- /pages/blogs/react/drag-and-drop.jsx: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | const DragAndDrop = () => { 4 | return ( 5 |
DragAndDrop
6 | ) 7 | } 8 | 9 | export default DragAndDrop -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 } -------------------------------------------------------------------------------- /sections/journeyParts/index.js: -------------------------------------------------------------------------------- 1 | import { School } from "./School"; 2 | import { College } from "./College"; 3 | import { Iit } from "./Iit"; 4 | import { YouTube } from "./YouTube"; 5 | import { FirstInternship } from "./FirstInternship"; 6 | import { SecondInternship } from "./SecondInternship"; 7 | 8 | export { School, College, Iit, YouTube, FirstInternship, SecondInternship }; 9 | -------------------------------------------------------------------------------- /utils/Theme.jsx: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | 3 | import { ThemeContext } from "@/context/themeContext"; 4 | 5 | const Theme = ({ children }) => { 6 | const { theme } = useContext(ThemeContext); 7 | 8 | return ( 9 | <> 10 |
{children}
11 | 12 | ); 13 | }; 14 | 15 | export default Theme; 16 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx,mdx}", 5 | "./components/**/*.{js,ts,jsx,tsx,mdx}", 6 | "./app/**/*.{js,ts,jsx,tsx,mdx}", 7 | "./sections/**/*.{js,ts,jsx,tsx,mdx}", 8 | "./utils/**/*.{js,ts,jsx,tsx,mdx}", 9 | "./layout/**/*.{js,ts,jsx,tsx,mdx}", 10 | ], 11 | darkMode: "class", 12 | theme: { 13 | extend: {}, 14 | }, 15 | plugins: [], 16 | } -------------------------------------------------------------------------------- /styles/animation.css: -------------------------------------------------------------------------------- 1 | .animation-1 { 2 | animation-name: widthIncrease; 3 | animation-duration: 1s; 4 | animation-iteration-count: infinite; 5 | animation-fill-mode: backwards; 6 | animation-delay: 2s; 7 | animation-timing-function: linear; 8 | } 9 | 10 | @keyframes widthIncrease { 11 | from { 12 | width: 6rem; 13 | } 14 | to { 15 | width: 20rem; 16 | } 17 | } 18 | 19 | @media (min-width: 640px) { 20 | .blogLink:hover { 21 | transition: all 0.5s; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /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 | ]; -------------------------------------------------------------------------------- /utils/Resume.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | 3 | const Resume = () => { 4 | return ( 5 | 6 |
7 | 11 | Resume 12 | 13 |
14 | 15 | ); 16 | }; 17 | 18 | export default Resume; 19 | -------------------------------------------------------------------------------- /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) -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /utils/ChatSystem.jsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from "react"; 2 | 3 | const ChatSystem = () => { 4 | useEffect(() => { 5 | // Tawk.to script 6 | var Tawk_API = Tawk_API || {}; 7 | var Tawk_LoadStart = new Date(); 8 | (function () { 9 | var s1 = document.createElement("script"), 10 | s0 = document.getElementsByTagName("script")[0]; 11 | s1.async = true; 12 | s1.src = `https://embed.tawk.to/${process.env.NEXT_PUBLIC_TAWK_TO_API_KEY}`; 13 | s1.charset = "UTF-8"; 14 | s1.setAttribute("crossorigin", "*"); 15 | s0.parentNode.insertBefore(s1, s0); 16 | 17 | window.Tawk_API = window.Tawk_API || {}; 18 | window.Tawk_API.customStyle = { 19 | zIndex: 2, 20 | }; 21 | })(); 22 | }, []); 23 | 24 | return <>; // The component doesn't need to render anything, it's just for the script to run. 25 | }; 26 | 27 | export default ChatSystem; 28 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 -------------------------------------------------------------------------------- /sections/journeyParts/YouTube.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const YouTube = () => { 7 | return ( 8 | 9 |
10 |
11 |

12 | {JourneyData[3].heading} 13 |

14 |

{JourneyData[3].summary}

15 |
16 |
17 | youtube 24 |
25 |
26 | 27 | ); 28 | }; -------------------------------------------------------------------------------- /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/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 | ]; -------------------------------------------------------------------------------- /sections/journeyParts/College.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const College = () => { 7 | return ( 8 | 9 |
10 | { 11 |
12 |

13 | {JourneyData[2].heading} 14 |

15 |

{JourneyData[2].summary}

16 |
17 | } 18 |
19 | 26 |
27 |
28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /sections/journeyParts/School.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const School = () => { 7 | return ( 8 | 9 |
10 |
11 |

12 | {JourneyData[0].heading}{" "} 13 | ( Till 10th Grade ) 14 |

15 |
{JourneyData[0].summary}
16 |
17 |
18 | school 25 |
26 |
27 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /styles/cssGrid.css: -------------------------------------------------------------------------------- 1 | .grid1 div, 2 | .grid2 div, 3 | .grid3 div { 4 | background-color: #5f9ea0; 5 | @apply dark:bg-[#7cdfe2]; 6 | } 7 | 8 | .grid1 div, 9 | .grid2 div { 10 | height: 200px; 11 | } 12 | 13 | .grid1, 14 | .grid2, 15 | .grid3 { 16 | display: grid; 17 | gap: 10px; 18 | border: 4px solid #7cdfe2; 19 | padding: 10px; 20 | @apply dark:border-[#5f9ea0]; 21 | } 22 | 23 | .grid1 { 24 | grid-template-columns: repeat(7, 1fr); 25 | } 26 | 27 | .grid2 { 28 | grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 29 | } 30 | 31 | .grid3 { 32 | grid-template-columns: repeat(5, 1fr); 33 | grid-template-rows: repeat(3, 200px); 34 | } 35 | 36 | .grid3 div { 37 | padding: 5px; 38 | padding-top: 15px; 39 | } 40 | 41 | .grid3 > div:nth-child(1) { 42 | grid-column-start: 1; 43 | grid-column-end: 3; 44 | grid-row-start: 1; 45 | grid-row-end: 3; 46 | } 47 | 48 | .grid3 > div:nth-child(2) { 49 | grid-column: 3/6; 50 | } 51 | 52 | .grid3 > div:nth-child(3) { 53 | grid-column: 1/3; 54 | grid-row: 3/4; 55 | } 56 | 57 | .grid3 > div:nth-child(4) { 58 | grid-column: 3/5; 59 | grid-row: 2/4; 60 | } 61 | -------------------------------------------------------------------------------- /sections/journeyParts/Iit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const Iit = () => { 7 | return ( 8 | 9 |
10 |
11 |

12 | {JourneyData[1].heading} {" "} 13 | ( Kota 11th and 12th ) 14 |

15 |
16 |

{JourneyData[1].summary}

17 |
18 |
19 |
20 | IIt 27 |
28 |
29 | 30 | ); 31 | }; -------------------------------------------------------------------------------- /sections/journeyParts/FirstInternship.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const FirstInternship = () => { 7 | return ( 8 | 9 |
10 |
11 |

12 | {JourneyData[4].heading} - 3 Months 13 |

14 |
{JourneyData[4].summary}
15 |
16 | {JourneyData[4].image && ( 17 |
18 | youtube 25 |
26 | )} 27 |
28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /sections/journeyParts/SecondInternship.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Image from "next/image"; 3 | 4 | import { JourneyData } from "@/constants"; 5 | 6 | export const SecondInternship = () => { 7 | return ( 8 | 9 |
10 |
11 |

12 | {JourneyData[5].heading} - 2 Months 13 |

14 |
{JourneyData[5].summary}
15 |
16 | {JourneyData[5].image && ( 17 |
18 | youtube 25 |
26 | )} 27 |
28 | 29 | ); 30 | }; 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /utils/SocialMedia.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useContext } from "react"; 2 | import Link from "next/link"; 3 | import { MdFeedback } from "react-icons/md"; 4 | 5 | import { SocialMediaData } from "@/constants/SocialMediaData"; 6 | import { PortfolioContext } from "@/contextApi/PortfolioContext"; 7 | 8 | const SocialMedia = () => { 9 | const { setShowModal } = useContext(PortfolioContext); 10 | 11 | return ( 12 | 13 |
14 | {SocialMediaData.map((social, key) => ( 15 | 16 |
20 | {social.icon} 21 |
22 | 23 | ))} 24 | 30 |
31 | 32 | ); 33 | }; 34 | 35 | export default SocialMedia; 36 | -------------------------------------------------------------------------------- /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; -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /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 | ] -------------------------------------------------------------------------------- /pages/apps/music-chalao.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useEffect, useState } from "react"; 2 | import Head from "next/head"; 3 | import axios from "axios"; 4 | 5 | import Theme from "@/utils/Theme"; 6 | 7 | const MusicChalao = () => { 8 | const [songs, setSongs] = useState({}); 9 | 10 | useEffect(() => {}, []); 11 | 12 | const loadMusic = async () => { 13 | const options = { 14 | method: "GET", 15 | url: "https://deezerdevs-deezer.p.rapidapi.com/infos", 16 | headers: { 17 | "X-RapidAPI-Key": process.enc.RAPID_API_KEY, 18 | "X-RapidAPI-Host": "deezerdevs-deezer.p.rapidapi.com", 19 | }, 20 | }; 21 | 22 | try { 23 | const response = await axios.request(options); 24 | console.log(response.data); 25 | setSongs(response.data); 26 | } catch (error) { 27 | console.error(error); 28 | } 29 | }; 30 | 31 | return ( 32 | 33 | 34 | Music Chalao 35 | 36 | 37 | 38 |
39 |

40 | News App 41 |

42 | 43 |
47 | 48 | 49 | ); 50 | }; 51 | 52 | export default MusicChalao; 53 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /utils/ShoveeModal.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { useEffect, useState } from "react"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | 6 | const ShoveeModal = () => { 7 | const [showModal, setShowModal] = useState(false); 8 | 9 | useEffect(() => { 10 | setTimeout(() => { 11 | setShowModal(true); 12 | }, 25000); 13 | }, []); 14 | 15 | return ( 16 |
20 |
21 |

22 | Create your personal portfolio website in 5 minutes with{" "} 23 |

24 |
25 | 30 | logo 36 |

37 | SHOVEE 38 |

39 | 40 |
41 |
42 | 48 | 53 | Go To Shovee 54 | 55 |
56 |
57 |
58 | ); 59 | }; 60 | 61 | export default ShoveeModal; 62 | -------------------------------------------------------------------------------- /pages/blogs/react/virtual-dom.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Head from "next/head"; 3 | 4 | import Theme from "@/utils/Theme"; 5 | import BackTo from "@/components/buttons/BackTo"; 6 | 7 | const VirtualDom = () => { 8 | return ( 9 | 10 | 11 | Virtual DOM 12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 |

20 | Virtual DOM in React 21 |

22 | 23 |

24 | When you're working with a web application built using frameworks 25 | like React, there are often many changes happening in user 26 | interface(UI). The virtual dom is a concept that helps optimize 27 | these changes and improve performance. 28 |

29 | 30 |

1. Traditional DOM

31 |

32 | The document object model(DOM) is representation of the html 33 | structure of a web page. It defines how elements are organized, 34 | their attributes and their relationship with each other. Whenever 35 | there's a change in the application's state or data, the DOM needs 36 | to be updated to reflect those changes. 37 |

38 | 39 |

2. Virtual DOM

40 |

41 | The virtual DOM is like a lightweight copy or representation of 42 | actual DOM. It's a javascript object that keeps track of current 43 | state of the ui. When changes occures in your application, the 44 | virtual dom is updated instead of directly modifying the actual 45 | DOM. 46 |

47 |
48 | 49 |
"Ram Ram"
50 |
51 | 52 | 53 | ); 54 | }; 55 | 56 | export default VirtualDom; 57 | -------------------------------------------------------------------------------- /sections/LatestBlogs.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { BsPenFill } from "react-icons/bs"; 5 | 6 | import { BlogsData } from "@/constants"; 7 | import AnimatedButton from "@/components/buttons/AnimatedButton"; 8 | 9 | const LatestBlogs = () => { 10 | return ( 11 | 12 |
13 |
16 |

17 | 18 | 19 | 20 | Blogs 21 |

22 |
23 | {BlogsData.slice(-4) 24 | .reverse() 25 | .map((blog) => ( 26 |
27 | 28 |
29 | img not found 37 |
38 |
{blog.name}
39 |

40 | {blog.date} 41 |

42 |
43 |
44 | 45 |
46 | ))} 47 |
48 |
49 | 50 |
51 |
52 |
53 | 54 | ); 55 | }; 56 | 57 | export default LatestBlogs; 58 | -------------------------------------------------------------------------------- /sections/Apps.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useContext } from "react"; 2 | import Link from "next/link"; 3 | import Image from "next/image"; 4 | import { IoMdAppstore } from "react-icons/io"; 5 | 6 | import { AppsData } from "@/constants"; 7 | import { ThemeContext } from "@/context/themeContext"; 8 | 9 | const Apps = () => { 10 | const { theme } = useContext(ThemeContext); 11 | 12 | return ( 13 | 14 |
15 |
16 |

17 | 18 | {" "} 19 | 20 | {" "} 21 | Apps 22 |

23 | 24 |
25 | {AppsData.map((app, key) => ( 26 |
27 | 28 | app 35 | 36 |
37 | ))} 38 |
39 | 40 | 41 |
42 | 43 | ); 44 | }; 45 | 46 | export default Apps; 47 | 48 | const MobileScreenApps = () => { 49 | return ( 50 |
51 | {AppsData.map((app, key) => ( 52 |
53 | 54 |
55 | {app.name} 62 |
63 | 64 |

{app.name}

65 |
66 | ))} 67 |
68 | ); 69 | }; 70 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | * { 6 | scroll-behavior: smooth !important; 7 | -webkit-scroll-behavior: smooth !important; /* other browsers */ 8 | } 9 | 10 | p, 11 | div { 12 | text-align: justify; 13 | } 14 | 15 | .sectionHeading { 16 | @apply px-4 text-center flex justify-center items-center text-3xl md:text-4xl font-medium dark:text-[#07d0e5] text-[#c72c6c] pb-8 md:pb-10; 17 | } 18 | 19 | @layer components { 20 | .blog-heading { 21 | @apply md:text-3xl text-xl font-bold text-center bg-[#07d0e5] dark:bg-[#c72c6c] rounded p-2; 22 | } 23 | 24 | /* Blogs.jsx */ 25 | .blogLink { 26 | @apply md:font-bold font-normal text-sm font-sans md:text-xl text-center p-1 mx-1; 27 | } 28 | 29 | /* For Blog Page */ 30 | .layoutContainer { 31 | @apply flex gap-x-7 w-full dark:bg-gray-900 sm:dark:bg-gray-700 transition-all duration-1000; 32 | } 33 | 34 | .layoutBox1 { 35 | @apply sm:w-[60%] ml-[3%] w-[94%] border-0 sm:border border-solid border-gray-300 rounded-xl p-4 sm:ml-[10%] min-h-[84vh] sm:h-[84vh] sm:overflow-y-scroll dark:bg-gray-900 my-[2vh] transition-all duration-1000; 36 | } 37 | .layoutBox2 { 38 | @apply w-[20%] p-2 mt-2 hidden sm:block transition-all duration-1000; 39 | } 40 | 41 | /* For tic-tac-toe */ 42 | .ttt .one, 43 | .ttt .two, 44 | .ttt .three { 45 | @apply sm:w-24 sm:h-24 w-16 h-16 border-2 border-solid border-black text-2xl font-bold flex items-center justify-center dark:border-white; 46 | } 47 | 48 | .ttt .one, 49 | .ttt .two { 50 | @apply border-r-0; 51 | } 52 | 53 | .ttt > div > div:nth-child(2) { 54 | @apply border-y-0; 55 | } 56 | } 57 | 58 | /* Home Animation and About Animation */ 59 | .slide-in { 60 | transform: translateX(0); 61 | opacity: 1; 62 | } 63 | /* TechStack, Experience, Education, Projects animation */ 64 | .pop-down { 65 | opacity: 0; 66 | scale: 0; 67 | } 68 | 69 | .pop-up { 70 | opacity: 1; 71 | scale: 1; 72 | } 73 | 74 | .pop-down-child > div { 75 | opacity: 0; 76 | scale: 0; 77 | } 78 | 79 | .pop-up-child > div { 80 | opacity: 1; 81 | scale: 1; 82 | } 83 | 84 | /* SocialMedia animation */ 85 | .social-hide > div { 86 | transform: scale(0); 87 | } 88 | 89 | .social-show > div { 90 | transform: scale(0.9); 91 | } 92 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /pages/blogs.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Head from "next/head"; 3 | import Link from "next/link"; 4 | import Image from "next/image"; 5 | import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; 6 | 7 | import { BlogsData } from "@/constants"; 8 | import Theme from "@/utils/Theme"; 9 | import BackTo from "@/components/buttons/BackTo"; 10 | 11 | const BlogsPage = () => { 12 | return ( 13 | 14 | 15 | Blogs 16 | 17 | 18 | 19 | 20 |
21 |

Blogs

22 | 23 |
24 | 27 | 28 | {BlogsData.map((blog) => ( 29 |
33 | 34 |
35 | img not found 43 |
44 |
{blog.name}
45 |

46 | {blog.date} 47 |

48 |
49 |
50 | 51 |
52 | ))} 53 | 54 | 55 |
56 |
57 | 58 | 59 | ); 60 | }; 61 | 62 | export default BlogsPage; 63 | -------------------------------------------------------------------------------- /pages/blogs/react/react-masonary.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useEffect, useState } from "react"; 2 | import Head from "next/head"; 3 | import axios from "axios"; 4 | import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"; 5 | 6 | import Theme from "@/utils/Theme"; 7 | import BackTo from "@/components/buttons/BackTo"; 8 | 9 | const ReactMasonary = () => { 10 | const [photos, setPhotos] = useState([]); 11 | 12 | useEffect(() => { 13 | axios 14 | .get("/api/masonary") 15 | .then((res) => { 16 | console.log(res.data.photos); 17 | setPhotos(res.data.photos); 18 | }) 19 | .catch((err) => console.log(err)); 20 | }, []); 21 | 22 | const handleDownload = async (imageUrl, myurl) => { 23 | try { 24 | const response = await fetch(imageUrl); 25 | const blob = await response.blob(); 26 | const url = URL.createObjectURL(blob); 27 | 28 | const link = document.createElement("a"); 29 | link.href = url; 30 | link.download = `${myurl.split("/")[myurl.split("/").length - 2]}.jpeg`; 31 | link.click(); 32 | 33 | // Clean up the temporary URL 34 | URL.revokeObjectURL(url); 35 | } catch (error) { 36 | console.error("Error downloading image:", error); 37 | } 38 | }; 39 | 40 | return ( 41 | 42 | 43 | React Masonary 44 | 45 | 46 | 47 | 48 |
49 |
50 | 53 | 54 | {photos?.map((photo, key) => { 55 | return ( 56 |
57 | 64 | {/* eslint-disable-next-line @next/next/no-img-element */} 65 | {photo.photographer} 66 |
67 | ); 68 | })} 69 | 70 | 71 |
72 | 73 | 74 | ); 75 | }; 76 | 77 | export default ReactMasonary; 78 | -------------------------------------------------------------------------------- /sections/education.jsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import React, { Fragment, useRef, useState, useEffect } from "react"; 3 | import Image from "next/image"; 4 | import { IoSchoolSharp } from "react-icons/io5"; 5 | 6 | import { EducationData } from "@/constants/EducationData"; 7 | 8 | const Education = () => { 9 | const [isEducation, setIsEducation] = useState(false); 10 | const educationRef = useRef(); 11 | const educationBoxesRef = useRef(); 12 | 13 | useEffect(() => { 14 | const getScreenWidth = () => 15 | window.innerWidth || 16 | document.documentElement.clientWidth || 17 | document.body.clientWidth; 18 | 19 | const educationObserver = new IntersectionObserver( 20 | ([educationEntry]) => { 21 | setIsEducation(educationEntry.isIntersecting); 22 | }, 23 | { 24 | rootMargin: `${getScreenWidth() <= 700 ? "-100px" : "-300px"}`, 25 | } 26 | ); 27 | 28 | educationObserver.observe(educationRef.current); 29 | 30 | if (isEducation) { 31 | educationBoxesRef.current.classList.add("pop-up-child"); 32 | } else { 33 | educationBoxesRef.current.classList.remove("pop-up-child"); 34 | } 35 | }, [isEducation]); 36 | 37 | return ( 38 | 39 |
44 |

45 | Education 46 |

47 | 48 |
52 | {EducationData.map((education) => ( 53 |
57 | {education.name} 64 |
65 |

66 | {education.name} 67 |

68 |

{education.schoolOrCollege}

69 |

70 | {education.fromTo}   |  {" "} 71 | {education.statusOrPrecentage} 72 |

73 |
74 |
75 | ))} 76 |
77 |
78 | 79 | ); 80 | }; 81 | 82 | export default Education; 83 | -------------------------------------------------------------------------------- /pages/blogs/css/blend-mode.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState } from "react"; 2 | import Head from "next/head"; 3 | 4 | import Theme from "@/utils/Theme"; 5 | import BackTo from "@/components/buttons/BackTo"; 6 | 7 | const BlendMode = () => { 8 | const [blendMode, setBlendMode] = useState("normal"); 9 | 10 | return ( 11 | 12 | 13 | Background Blend Mode 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 |

Background Blend Mode

22 | 23 |

24 | {" "} 25 | Note:- Before we are starting a example you 26 | should know, this property use for two images. 27 |

28 | 29 | 52 | 53 |
54 | background-blend-mode : {blendMode} 55 |
56 | 57 |
64 |
65 | 66 |
67 |

68 | CSS was first proposed by Håkon Wium Lie in 1994 and has since 69 | become a fundamental technology for designing and styling web 70 | pages. 71 |

72 | F 73 |
74 |
75 | 76 | 77 | ); 78 | }; 79 | 80 | export default BlendMode; 81 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /pages/blogs/css/object-fit.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment } from "react"; 2 | import Head from "next/head"; 3 | import Image from "next/image"; 4 | 5 | import Theme from "@/utils/Theme"; 6 | import BackTo from "@/components/buttons/BackTo"; 7 | 8 | const ObjectFit = () => { 9 | return ( 10 | 11 | 12 | Object-Fit 13 | 14 | 15 | 16 | 17 | 18 |
19 |
20 |

21 | object-fit 22 |

23 | 24 |
25 | object-fit : fill 26 |
27 | 28 |

29 | In This condition image cover all it's parent width and height but 30 | not maintain it's own width and hight ratio. 31 |

32 | 33 |
34 | 35 |
36 | 37 |
38 | object-fit : contain 39 |
40 |

41 | In This condition image maintain it's own width and heigth ratio 42 | but not neccessary to cover parent element's all height and width. 43 |

44 |
45 | 51 |
52 | 53 |
54 | object-fit : cover 55 |
56 |

57 | This property will cover all with and heigth of parent element of 58 | image width maintain image width and height ratio. 59 |

60 |
61 | 67 |
68 | 69 |
70 | object-fit : none 71 |
72 |

73 | In This condition image have it's real width and height. 74 |

75 |
76 | 82 |
83 |
84 | 85 |
86 |
87 | 88 | 89 | ); 90 | }; 91 | 92 | export default ObjectFit; 93 | -------------------------------------------------------------------------------- /utils/SendMail.jsx: -------------------------------------------------------------------------------- 1 | import React, { Fragment, useState } from "react"; 2 | import axios from "axios"; 3 | import { FiMessageCircle } from "react-icons/fi"; 4 | 5 | const SendMail = () => { 6 | const [formData, setFormData] = useState({}); 7 | const [sending, setSending] = useState(false); 8 | 9 | const collectData = (e) => { 10 | setFormData({ ...formData, [e.target.name]: e.target.value }); 11 | }; 12 | 13 | const sendMessage = (e) => { 14 | e.preventDefault(); 15 | 16 | const { name, email, message, subject } = formData; 17 | 18 | if (!name || !email || !subject || !message) { 19 | return alert("Please Fill All Data"); 20 | } 21 | 22 | setSending(true); 23 | axios 24 | .post("/api/mail/new", formData) 25 | .then((res) => { 26 | console.log(res.data); 27 | setSending(false); 28 | alert("Message Sended Successfully"); 29 | setFormData({}); 30 | }) 31 | .catch((err) => { 32 | console.log(err); 33 | setSending(false); 34 | alert(err); 35 | }); 36 | }; 37 | 38 | return ( 39 | 40 |
41 |
42 |

43 | 44 | 45 | 46 | Drop A Message 47 |

48 | 49 |
50 |
51 | 59 | 67 | 75 | 76 |