├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── CodeX.png ├── Ekart.png ├── Facebook.png ├── Icons │ ├── Angular.png │ ├── Bootstrap.png │ ├── C++.png │ ├── C.png │ ├── CSS.png │ ├── Express JS.png │ ├── Firebase.png │ ├── GSAP.png │ ├── Git.png │ ├── Github.png │ ├── HTML.png │ ├── Java.png │ ├── JavaScript.png │ ├── Material UI.png │ ├── MongoDB Compass.png │ ├── MongoDB.png │ ├── MySQL.png │ ├── Node JS.png │ ├── PostgresSQL.png │ ├── Postman.png │ ├── React JS.png │ ├── Redux.png │ ├── SASS.png │ ├── Spring Tool Suite.png │ ├── Springboot.png │ ├── Tailwind CSS.png │ ├── TypeScript.png │ └── VS Code.png ├── Infosys.png ├── Instagram.png ├── Resume.pdf ├── Spotify.png ├── Travel.png ├── favicon.ico ├── favicon.png ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json ├── profile.png └── robots.txt ├── src ├── App.css ├── App.test.tsx ├── App.tsx ├── Components │ ├── About.tsx │ ├── Contact.tsx │ ├── Experience.tsx │ ├── FloatingInput.tsx │ ├── Footer.tsx │ ├── FullProjectModal.tsx │ ├── Header.tsx │ ├── HomePage.tsx │ ├── Loader.tsx │ ├── Mail.tsx │ ├── ProjectCard.tsx │ ├── Projects.tsx │ ├── ResumeViewer.tsx │ ├── SideBar.tsx │ ├── SkillCard.tsx │ ├── Skills.tsx │ ├── Social.tsx │ ├── Validation.tsx │ └── magicui │ │ ├── Particles.tsx │ │ ├── icon-cloud.tsx │ │ └── neon-gradient-card.tsx ├── Firebase.tsx ├── User.tsx ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts └── setupTests.ts ├── tailwind.config.js └── tsconfig.json /.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 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Getting Started with Create React App 2 | 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 4 | 5 | ## Available Scripts 6 | 7 | In the project directory, you can run: 8 | 9 | ### `npm start` 10 | 11 | Runs the app in the development mode.\ 12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 13 | 14 | The page will reload if you make edits.\ 15 | You will also see any lint errors in the console. 16 | 17 | ### `npm test` 18 | 19 | Launches the test runner in the interactive watch mode.\ 20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. 21 | 22 | ### `npm run build` 23 | 24 | Builds the app for production to the `build` folder.\ 25 | It correctly bundles React in production mode and optimizes the build for the best performance. 26 | 27 | The build is minified and the filenames include the hashes.\ 28 | Your app is ready to be deployed! 29 | 30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. 31 | 32 | ### `npm run eject` 33 | 34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!** 35 | 36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project. 37 | 38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own. 39 | 40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it. 41 | 42 | ## Learn More 43 | 44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). 45 | 46 | To learn React, check out the [React documentation](https://reactjs.org/). 47 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-portfolio", 3 | "version": "0.1.0", 4 | "homepage": "https://code-mars.github.io/Portfolio", 5 | "private": true, 6 | "dependencies": { 7 | "@emotion/react": "^11.11.4", 8 | "@headlessui/react": "^2.0.4", 9 | "@mantine/core": "^7.10.2", 10 | "@mantine/form": "^7.10.2", 11 | "@mantine/hooks": "^7.10.2", 12 | "@tabler/icons-react": "^3.6.0", 13 | "@testing-library/jest-dom": "^5.17.0", 14 | "@testing-library/react": "^13.4.0", 15 | "@testing-library/user-event": "^13.5.0", 16 | "@types/jest": "^27.5.2", 17 | "@types/node": "^16.18.98", 18 | "@types/react": "^18.3.3", 19 | "@types/react-dom": "^18.3.0", 20 | "aos": "^3.0.0-beta.6", 21 | "firebase": "^10.12.3", 22 | "next-themes": "^0.3.0", 23 | "react": "^18.3.1", 24 | "react-dom": "^18.3.1", 25 | "react-hot-toast": "^2.4.1", 26 | "react-icon-cloud": "^4.1.4", 27 | "react-pdf": "^9.1.0", 28 | "react-scripts": "5.0.1", 29 | "tailwind-merge": "^2.3.0", 30 | "typescript": "^4.9.5", 31 | "typewriter-effect": "^2.21.0", 32 | "vanta": "^0.5.24", 33 | "web-vitals": "^2.1.4" 34 | }, 35 | "scripts": { 36 | "predeploy": "npm run build", 37 | "deploy": "gh-pages -d build", 38 | "start": "react-scripts start", 39 | "build": "react-scripts build", 40 | "test": "react-scripts test", 41 | "eject": "react-scripts eject" 42 | }, 43 | "eslintConfig": { 44 | "extends": [ 45 | "react-app", 46 | "react-app/jest" 47 | ] 48 | }, 49 | "browserslist": { 50 | "production": [ 51 | ">0.2%", 52 | "not dead", 53 | "not op_mini all" 54 | ], 55 | "development": [ 56 | "last 1 chrome version", 57 | "last 1 firefox version", 58 | "last 1 safari version" 59 | ] 60 | }, 61 | "devDependencies": { 62 | "@types/aos": "^3.0.7", 63 | "gh-pages": "^6.1.1", 64 | "tailwindcss": "^3.4.4" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /public/CodeX.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/CodeX.png -------------------------------------------------------------------------------- /public/Ekart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Ekart.png -------------------------------------------------------------------------------- /public/Facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Facebook.png -------------------------------------------------------------------------------- /public/Icons/Angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Angular.png -------------------------------------------------------------------------------- /public/Icons/Bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Bootstrap.png -------------------------------------------------------------------------------- /public/Icons/C++.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/C++.png -------------------------------------------------------------------------------- /public/Icons/C.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/C.png -------------------------------------------------------------------------------- /public/Icons/CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/CSS.png -------------------------------------------------------------------------------- /public/Icons/Express JS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Express JS.png -------------------------------------------------------------------------------- /public/Icons/Firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Firebase.png -------------------------------------------------------------------------------- /public/Icons/GSAP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/GSAP.png -------------------------------------------------------------------------------- /public/Icons/Git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Git.png -------------------------------------------------------------------------------- /public/Icons/Github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Github.png -------------------------------------------------------------------------------- /public/Icons/HTML.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/HTML.png -------------------------------------------------------------------------------- /public/Icons/Java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Java.png -------------------------------------------------------------------------------- /public/Icons/JavaScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/JavaScript.png -------------------------------------------------------------------------------- /public/Icons/Material UI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Material UI.png -------------------------------------------------------------------------------- /public/Icons/MongoDB Compass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/MongoDB Compass.png -------------------------------------------------------------------------------- /public/Icons/MongoDB.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/MongoDB.png -------------------------------------------------------------------------------- /public/Icons/MySQL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/MySQL.png -------------------------------------------------------------------------------- /public/Icons/Node JS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Node JS.png -------------------------------------------------------------------------------- /public/Icons/PostgresSQL.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/PostgresSQL.png -------------------------------------------------------------------------------- /public/Icons/Postman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Postman.png -------------------------------------------------------------------------------- /public/Icons/React JS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/React JS.png -------------------------------------------------------------------------------- /public/Icons/Redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Redux.png -------------------------------------------------------------------------------- /public/Icons/SASS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/SASS.png -------------------------------------------------------------------------------- /public/Icons/Spring Tool Suite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Spring Tool Suite.png -------------------------------------------------------------------------------- /public/Icons/Springboot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Springboot.png -------------------------------------------------------------------------------- /public/Icons/Tailwind CSS.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/Tailwind CSS.png -------------------------------------------------------------------------------- /public/Icons/TypeScript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/TypeScript.png -------------------------------------------------------------------------------- /public/Icons/VS Code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Icons/VS Code.png -------------------------------------------------------------------------------- /public/Infosys.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Infosys.png -------------------------------------------------------------------------------- /public/Instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Instagram.png -------------------------------------------------------------------------------- /public/Resume.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Resume.pdf -------------------------------------------------------------------------------- /public/Spotify.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Spotify.png -------------------------------------------------------------------------------- /public/Travel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/Travel.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/favicon.ico -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | 30 | Chandrabhan Maurya 31 | 32 | 33 | 34 |
35 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/public/profile.png -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Code-Mars/Portfolio/e7628c4056e898b6bbe4e1d059669f4712eb411c/src/App.css -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import "@mantine/core/styles.css"; 2 | import './App.css'; 3 | import HomePage from './Components/HomePage'; 4 | import { MantineProvider, createTheme } from '@mantine/core'; 5 | import { pdfjs } from 'react-pdf'; 6 | import AOS from 'aos'; 7 | import 'aos/dist/aos.css'; 8 | import { useEffect } from "react"; 9 | 10 | pdfjs.GlobalWorkerOptions.workerSrc = `https://cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; 11 | 12 | function App() { 13 | useEffect(()=>{ 14 | AOS.init(); 15 | AOS.refresh(); 16 | }, []); 17 | 18 | const theme = createTheme({ 19 | breakpoints: { 20 | 'xs': '320px', 21 | 'sm': '476px', 22 | 'md': '640px', 23 | 'bs': '768px', 24 | 'lg': '900px', 25 | 'xl': '1024', 26 | '2xl': '1280', 27 | }, 28 | }); 29 | return ( 30 | 31 | 32 | 33 | ); 34 | } 35 | 36 | export default App; 37 | -------------------------------------------------------------------------------- /src/Components/About.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Info } from "../User"; 3 | import Typewriter from "typewriter-effect"; 4 | import { Button, useMatches } from "@mantine/core"; 5 | import ResumeViewer from "./ResumeViewer"; 6 | import { useDisclosure } from "@mantine/hooks"; 7 | import { IconDownload } from "@tabler/icons-react"; 8 | import Particles from "./magicui/Particles"; 9 | import { NeonGradientCard } from "./magicui/neon-gradient-card"; 10 | const About = () => { 11 | const [opened, { open, close }] = useDisclosure(false); 12 | const btn =useMatches({ 13 | xs:'xs', 14 | sm:'sm', 15 | md:'md', 16 | lg:'lg' 17 | }) 18 | return ( 19 | <> 20 |
21 | 30 |
31 |
Hi, I am
32 |
{Info.name}
33 |
I'm a 
34 |
{Info.bio}
35 |
36 | 37 | 38 |
39 |
40 |
41 | 42 | profile 43 | 44 |
45 |
46 | 47 | 48 | ) 49 | } 50 | export default About; -------------------------------------------------------------------------------- /src/Components/Contact.tsx: -------------------------------------------------------------------------------- 1 | import {useState } from "react"; 2 | import FloatingInput from "./FloatingInput"; 3 | import { Button, useMatches } from "@mantine/core"; 4 | import { IconArrowRight, IconTopologyStar3 } from "@tabler/icons-react"; 5 | import { validateForm } from "./Validation"; 6 | import { collection, addDoc } from "firebase/firestore"; 7 | import { db } from "../Firebase"; 8 | import toast from "react-hot-toast"; 9 | 10 | const Contact = () => { 11 | 12 | const form = { 13 | name: "", 14 | email: "", 15 | phone: "", 16 | message: "" 17 | } 18 | const [formData, setFormData] = useState<{ [key: string]: string }>(form); 19 | const [formError, setFormError] = useState<{ [key: string]: string }>(form); 20 | 21 | const handleChange = (id: string, value: string) => { 22 | setFormData({ ...formData, [id]: value }); 23 | setFormError({ ...formError, [id]: validateForm(id, value)}) 24 | } 25 | const handleSubmit=async()=>{ 26 | let valid=true; 27 | let newFormError:{[key:string]:string}={}; 28 | for(let key in formData){ 29 | const error=validateForm(key, formData[key]); 30 | if(error.length>0){ 31 | newFormError[key]=error; 32 | valid=false; 33 | } 34 | } 35 | setFormError(newFormError); 36 | if(valid){ 37 | setFormData(form); 38 | toast.success('Submitted Successfully!', {duration:4000}); 39 | await addDoc(collection(db, "portfolio"), formData); 40 | } 41 | else{ 42 | toast.error('Some error occurred!', {duration:4000}) 43 | } 44 | } 45 | 46 | const btn = useMatches({ 47 | xsm: 'xs', 48 | sm: "sm", 49 | md: 'md', 50 | lg: "lg" 51 | }) 52 | return
53 |

05. Contact

54 |
55 |
Let's Connect
56 | 57 | 58 | 59 | 60 | 62 |
63 |
64 | } 65 | export default Contact; -------------------------------------------------------------------------------- /src/Components/Experience.tsx: -------------------------------------------------------------------------------- 1 | import { Text, Timeline, useMatches } from "@mantine/core"; 2 | import { IconBriefcaseFilled, IconGitBranch, IconGitCommit, IconGitPullRequest, IconMessageDots } from "@tabler/icons-react"; 3 | import { ExperienceInfo } from "../User"; 4 | 5 | const TimelineItem = (items: any) => { 6 | const size=useMatches({ 7 | xs:15, 8 | md:20, 9 | }) 10 | return items.map((item: any, index: number) => } > 12 |
13 |
14 | Company 15 |
16 |
{item.role}
17 |
{item.company} • {item.date}
18 |
19 |
20 |
21 | {item.desc} 22 |
23 | 24 |
Skills:
25 |
26 | { 27 | item.skills.map((skill: any, index: number) =>
• {skill}
) 28 | } 29 |
30 |
31 |
32 | ) 33 | } 34 | 35 | const Experience = () => { 36 | const size=useMatches({ 37 | xs:15, 38 | md:20, 39 | }) 40 | const dot=useMatches({ 41 | xs:25, 42 | md:30, 43 | }) 44 | return
45 |

04. Experience

46 | 47 | { 48 | TimelineItem(ExperienceInfo) 49 | } 50 | } > 51 | 52 |
53 | } 54 | export default Experience; -------------------------------------------------------------------------------- /src/Components/FloatingInput.tsx: -------------------------------------------------------------------------------- 1 | const FloatingInput = (props: any) => { 2 | 3 | return
4 | {props.id != "message" ? props.handleChange(props.id, e.target.value)} className={`block px-2.5 pb-2.5 pt-4 w-full text-xl sm-mx:text-lg xs-mx:text-base sm-mx:pb-1 sm-mx:pt-2 rounded-xl text-white bg-transparent border border-textColor appearance-none hover:shadow-[0_0_8px_0_#64FFDA70] focus:shadow-[0_0_8px_0_#64FFDA70] focus:outline-none ${props.error?"border-red-500":""} focus:ring-0 focus:border-primaryColor peer`} placeholder="" /> : 5 | } 6 | 7 |
8 | {props.error &&
{props.error}
} 9 |
10 | } 11 | export default FloatingInput; -------------------------------------------------------------------------------- /src/Components/Footer.tsx: -------------------------------------------------------------------------------- 1 | import { Info, socialLinks} from "../User"; 2 | 3 | const Footer=()=>{ 4 | const socialIcons=socialLinks.map((socialLink, index)=>{ 5 | return 6 | 7 | 8 | }) 9 | return
10 |
{Info.name}
11 |
{socialIcons}
12 |
Copyright © {new Date().getFullYear()} {Info.name} | All Rights Reserved
13 |
14 | } 15 | export default Footer; -------------------------------------------------------------------------------- /src/Components/FullProjectModal.tsx: -------------------------------------------------------------------------------- 1 | import { Badge, Button, Group, Image, Indicator, Modal, ScrollArea, Text, useMatches } from "@mantine/core"; 2 | 3 | const FullProjectModal = (props: any) => { 4 | const download=useMatches({xs:"xs", md:"sm", lg:"md", bs:"lg"}); 5 | const techno=useMatches({xs:"md", sm:"md", md:"lg", bs:"xl"}); 6 | const btn =useMatches({xs:'xs',sm:'sm',md:'md',lg:'lg'}); 7 | return 8 | 9 | 10 | 11 | {props.title}{props.live === true && } >Live} 12 | 13 | 14 | 15 | {props.image} 20 |
21 | {props.technologies.map((tech: string, index: number) => {tech})} 22 |
23 | 24 | {props.desc} 25 | 26 | 27 | 30 | 31 | 34 | 35 | 36 | 37 | 38 | 39 | } 40 | export default FullProjectModal; -------------------------------------------------------------------------------- /src/Components/Header.tsx: -------------------------------------------------------------------------------- 1 | import { IconHexagonLetterC } from "@tabler/icons-react"; 2 | import SideBar from "./SideBar"; 3 | import { useMediaQuery } from "@mantine/hooks"; 4 | import { em } from "@mantine/core"; 5 | import { useEffect, useState } from "react"; 6 | 7 | const links=["About","Projects","Skills","Experience","Contact"]; 8 | const navLinks=(col:Boolean, clicked:any)=>{ 9 | const handleClick=()=>{ 10 | if(clicked)clicked(); 11 | } 12 | return links.map((link, index)=>{ 13 | return 0{index+1}. {link} 14 | }) 15 | } 16 | 17 | const Header=()=>{ 18 | const isMobile = useMediaQuery(`(max-width: ${em(476)})`); 19 | const [show, setShow] = useState(true); 20 | const [lastScrollY, setLastScrollY] = useState(0); 21 | const [shadow, setShadow] = useState(false); 22 | const controlNavbar = () => { 23 | if(window.scrollY>lastScrollY && window.scrollY>70)setShow(false); 24 | else setShow(true); 25 | if(window.scrollY>70)setShadow(true); 26 | else setShadow(false); 27 | setLastScrollY(window.scrollY); 28 | } 29 | useEffect(()=>{ 30 | window.addEventListener('scroll', controlNavbar); 31 | return ()=>window.removeEventListener('scroll', controlNavbar); 32 | }) 33 | return ( 34 | 42 | ); 43 | } 44 | export default Header; 45 | export {navLinks}; -------------------------------------------------------------------------------- /src/Components/HomePage.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import About from "./About"; 3 | import Contact from "./Contact"; 4 | import Experience from "./Experience"; 5 | import Footer from "./Footer"; 6 | import Header from "./Header" 7 | import { Loader } from "./Loader"; 8 | import Mail from "./Mail"; 9 | import Projects from "./Projects"; 10 | import Skills from "./Skills"; 11 | import Social from "./Social"; 12 | import { Toaster } from "react-hot-toast"; 13 | 14 | const HomePage = () => { 15 | const [loading, setLoading] = useState(true); 16 | useEffect(()=>{ 17 | setTimeout(()=>{ 18 | setLoading(false); 19 | }, 5000) 20 | }, []) 21 | return
22 | { loading!==true?<> 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | : 34 | } 35 |
36 | }; 37 | export default HomePage; -------------------------------------------------------------------------------- /src/Components/Loader.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { IconHexagon } from "@tabler/icons-react"; 3 | import { Slugs } from "../User"; 4 | import IconCloud from "./magicui/icon-cloud"; 5 | 6 | 7 | export function Loader() { 8 | return ( 9 |
10 | 11 | 12 |
CM
13 |
14 | ); 15 | } 16 | -------------------------------------------------------------------------------- /src/Components/Mail.tsx: -------------------------------------------------------------------------------- 1 | const Mail=()=>{ 2 | return
3 |
4 | 5 | chandrabhan.work@gmail.com 6 | 7 |
8 |
9 |
10 | } 11 | export default Mail; -------------------------------------------------------------------------------- /src/Components/ProjectCard.tsx: -------------------------------------------------------------------------------- 1 | import { Badge, Button, Card, Group, Image, Indicator, Text, useMatches } from "@mantine/core"; 2 | import { useDisclosure } from "@mantine/hooks"; 3 | import FullProjectModal from "./FullProjectModal"; 4 | const ProjectCard = (props: any) => { 5 | const [opened, { open, close }] = useDisclosure(false); 6 | const badge=useMatches({ 7 | xsm:"sm", md:"md", lg:"lg" 8 | }); 9 | const btn =useMatches({ 10 | xs:"xs", sm:"sm", md:"md" 11 | }); 12 | return
13 | 14 | {props.image} 19 | 20 | 21 | 22 |
{props.title}{props.live === true && } >Live}
23 | 24 | 25 | 26 | {props.technologies.map((tech: string, index: number) => index < 3 && {tech})} 27 | 28 | 29 | {props.desc} 30 | 31 | 32 | 35 | 36 | 37 |
38 | 39 | } 40 | export default ProjectCard; -------------------------------------------------------------------------------- /src/Components/Projects.tsx: -------------------------------------------------------------------------------- 1 | import { ProjectInfo } from "../User"; 2 | import ProjectCard from "./ProjectCard"; 3 | 4 | const Projects=()=>{ 5 | return ( 6 |
7 |

02. Projects

8 |
9 | { 10 | ProjectInfo.map((project:any, index:number)=>) 11 | } 12 |
13 |
14 | ) 15 | } 16 | export default Projects; -------------------------------------------------------------------------------- /src/Components/ResumeViewer.tsx: -------------------------------------------------------------------------------- 1 | import { ActionIcon, Modal, ScrollArea, Tooltip, useMatches } from "@mantine/core"; 2 | import { IconArrowBigDownLineFilled } from "@tabler/icons-react"; 3 | import { Document, Page } from "react-pdf"; 4 | import { Info } from "../User"; 5 | 6 | const ResumeViewer = (props: any) => { 7 | const btn=useMatches({ 8 | xs:'xs', 9 | sm:'sm', 10 | md:'md', 11 | }) 12 | return 13 | 14 | 15 | 16 | Resume 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | } 33 | export default ResumeViewer; -------------------------------------------------------------------------------- /src/Components/SideBar.tsx: -------------------------------------------------------------------------------- 1 | import { useDisclosure } from '@mantine/hooks'; 2 | import { Drawer, Burger, useMatches } from '@mantine/core'; 3 | import { navLinks } from './Header'; 4 | 5 | const SideBar=()=> { 6 | const [opened, { toggle }] = useDisclosure(false); 7 | const size=useMatches({ 8 | xs:'md', 9 | sm:'lg' 10 | }); 11 | 12 | return ( 13 | <> 14 | 15 | 16 | 17 | 18 | {navLinks(true, toggle)} 19 | 20 | 21 | 22 | 23 | 24 | 25 | ); 26 | } 27 | export default SideBar; -------------------------------------------------------------------------------- /src/Components/SkillCard.tsx: -------------------------------------------------------------------------------- 1 | import { Avatar } from "@mantine/core"; 2 | 3 | const SkillBadge=(skills:[])=>{ 4 | return skills.map((skill:any, index:number)=>
5 | 6 |
{skill}
7 |
) 8 | } 9 | 10 | const SkillCard =(props:any)=>{ 11 | return
12 |
{props.title}
13 |
14 | {SkillBadge(props.skills)} 15 |
16 |
17 | } 18 | export default SkillCard; -------------------------------------------------------------------------------- /src/Components/Skills.tsx: -------------------------------------------------------------------------------- 1 | import { SkillInfo } from "../User"; 2 | import SkillCard from "./SkillCard"; 3 | 4 | const Skills=()=>{ 5 | return
6 |

03. Skills

7 |
8 | { 9 | SkillInfo.map((skill:any, index:number)=>) 10 | } 11 |
12 |
13 | } 14 | export default Skills; -------------------------------------------------------------------------------- /src/Components/Social.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { socialLinks } from "../User"; 3 | 4 | const Social=()=>{ 5 | const socialIcons=socialLinks.map((socialLink, index)=>{ 6 | return 7 |
8 | 9 | }) 10 | 11 | return
12 | {socialIcons} 13 |
14 |
15 | } 16 | export default Social; -------------------------------------------------------------------------------- /src/Components/Validation.tsx: -------------------------------------------------------------------------------- 1 | const validateForm=(id:string, value:any)=>{ 2 | switch(id){ 3 | case 'name': 4 | if(value.length===0)return "Name is required"; 5 | if(value.length<3)return "Name must be atleast 3 characters long"; 6 | return ""; 7 | case 'email': 8 | if(value.length===0)return "Email is required"; 9 | if(!/[A-Za-z0-9\._%+\-]+@[A-Za-z0-9\.\-]+\.[A-Za-z]{2,}/.test(value))return "Email is invalid"; 10 | return ""; 11 | case 'phone': 12 | if(value.length===0)return "Phone Number is required"; 13 | if(!/^[0-9]*$/.test(value))return "Phone Number is invalid"; 14 | if(value.length!==10)return "Phone Number must be 10 digits long"; 15 | return ""; 16 | case 'message': 17 | if(value.length===0)return "Message is required"; 18 | return ""; 19 | default: 20 | return ""; 21 | } 22 | } 23 | export {validateForm} -------------------------------------------------------------------------------- /src/Components/magicui/Particles.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import React, { useEffect, useRef, useState } from "react"; 4 | 5 | interface MousePosition { 6 | x: number; 7 | y: number; 8 | } 9 | 10 | function MousePosition(): MousePosition { 11 | const [mousePosition, setMousePosition] = useState({ 12 | x: 0, 13 | y: 0, 14 | }); 15 | 16 | useEffect(() => { 17 | const handleMouseMove = (event: MouseEvent) => { 18 | setMousePosition({ x: event.clientX, y: event.clientY }); 19 | }; 20 | 21 | window.addEventListener("mousemove", handleMouseMove); 22 | 23 | return () => { 24 | window.removeEventListener("mousemove", handleMouseMove); 25 | }; 26 | }, []); 27 | 28 | return mousePosition; 29 | } 30 | 31 | interface ParticlesProps { 32 | className?: string; 33 | quantity?: number; 34 | staticity?: number; 35 | ease?: number; 36 | size?: number; 37 | refresh?: boolean; 38 | color?: string; 39 | vx?: number; 40 | vy?: number; 41 | } 42 | function hexToRgb(hex: string): number[] { 43 | hex = hex.replace("#", ""); 44 | const hexInt = parseInt(hex, 16); 45 | const red = (hexInt >> 16) & 255; 46 | const green = (hexInt >> 8) & 255; 47 | const blue = hexInt & 255; 48 | return [red, green, blue]; 49 | } 50 | 51 | const Particles: React.FC = ({ 52 | className = "", 53 | quantity = 100, 54 | staticity = 50, 55 | ease = 50, 56 | size = 0.4, 57 | refresh = false, 58 | color = "#ffffff", 59 | vx = 0, 60 | vy = 0, 61 | }) => { 62 | const canvasRef = useRef(null); 63 | const canvasContainerRef = useRef(null); 64 | const context = useRef(null); 65 | const circles = useRef([]); 66 | const mousePosition = MousePosition(); 67 | const mouse = useRef<{ x: number; y: number }>({ x: 0, y: 0 }); 68 | const canvasSize = useRef<{ w: number; h: number }>({ w: 0, h: 0 }); 69 | const dpr = typeof window !== "undefined" ? window.devicePixelRatio : 1; 70 | 71 | useEffect(() => { 72 | if (canvasRef.current) { 73 | context.current = canvasRef.current.getContext("2d"); 74 | } 75 | initCanvas(); 76 | animate(); 77 | window.addEventListener("resize", initCanvas); 78 | 79 | return () => { 80 | window.removeEventListener("resize", initCanvas); 81 | }; 82 | }, [color]); 83 | 84 | useEffect(() => { 85 | onMouseMove(); 86 | }, [mousePosition.x, mousePosition.y]); 87 | 88 | useEffect(() => { 89 | initCanvas(); 90 | }, [refresh]); 91 | 92 | const initCanvas = () => { 93 | resizeCanvas(); 94 | drawParticles(); 95 | }; 96 | 97 | const onMouseMove = () => { 98 | if (canvasRef.current) { 99 | const rect = canvasRef.current.getBoundingClientRect(); 100 | const { w, h } = canvasSize.current; 101 | const x = mousePosition.x - rect.left - w / 2; 102 | const y = mousePosition.y - rect.top - h / 2; 103 | const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2; 104 | if (inside) { 105 | mouse.current.x = x; 106 | mouse.current.y = y; 107 | } 108 | } 109 | }; 110 | 111 | type Circle = { 112 | x: number; 113 | y: number; 114 | translateX: number; 115 | translateY: number; 116 | size: number; 117 | alpha: number; 118 | targetAlpha: number; 119 | dx: number; 120 | dy: number; 121 | magnetism: number; 122 | }; 123 | 124 | const resizeCanvas = () => { 125 | if (canvasContainerRef.current && canvasRef.current && context.current) { 126 | circles.current.length = 0; 127 | canvasSize.current.w = canvasContainerRef.current.offsetWidth; 128 | canvasSize.current.h = canvasContainerRef.current.offsetHeight; 129 | canvasRef.current.width = canvasSize.current.w * dpr; 130 | canvasRef.current.height = canvasSize.current.h * dpr; 131 | canvasRef.current.style.width = `${canvasSize.current.w}px`; 132 | canvasRef.current.style.height = `${canvasSize.current.h}px`; 133 | context.current.scale(dpr, dpr); 134 | } 135 | }; 136 | 137 | const circleParams = (): Circle => { 138 | const x = Math.floor(Math.random() * canvasSize.current.w); 139 | const y = Math.floor(Math.random() * canvasSize.current.h); 140 | const translateX = 0; 141 | const translateY = 0; 142 | const pSize = Math.floor(Math.random() * 2) + size; 143 | const alpha = 0; 144 | const targetAlpha = parseFloat((Math.random() * 0.6 + 0.1).toFixed(1)); 145 | const dx = (Math.random() - 0.5) * 0.1; 146 | const dy = (Math.random() - 0.5) * 0.1; 147 | const magnetism = 0.1 + Math.random() * 4; 148 | return { 149 | x, 150 | y, 151 | translateX, 152 | translateY, 153 | size: pSize, 154 | alpha, 155 | targetAlpha, 156 | dx, 157 | dy, 158 | magnetism, 159 | }; 160 | }; 161 | 162 | const rgb = hexToRgb(color); 163 | 164 | const drawCircle = (circle: Circle, update = false) => { 165 | if (context.current) { 166 | const { x, y, translateX, translateY, size, alpha } = circle; 167 | context.current.translate(translateX, translateY); 168 | context.current.beginPath(); 169 | context.current.arc(x, y, size, 0, 2 * Math.PI); 170 | context.current.fillStyle = `rgba(${rgb.join(", ")}, ${alpha})`; 171 | context.current.fill(); 172 | context.current.setTransform(dpr, 0, 0, dpr, 0, 0); 173 | 174 | if (!update) { 175 | circles.current.push(circle); 176 | } 177 | } 178 | }; 179 | 180 | const clearContext = () => { 181 | if (context.current) { 182 | context.current.clearRect( 183 | 0, 184 | 0, 185 | canvasSize.current.w, 186 | canvasSize.current.h, 187 | ); 188 | } 189 | }; 190 | 191 | const drawParticles = () => { 192 | clearContext(); 193 | const particleCount = quantity; 194 | for (let i = 0; i < particleCount; i++) { 195 | const circle = circleParams(); 196 | drawCircle(circle); 197 | } 198 | }; 199 | 200 | const remapValue = ( 201 | value: number, 202 | start1: number, 203 | end1: number, 204 | start2: number, 205 | end2: number, 206 | ): number => { 207 | const remapped = 208 | ((value - start1) * (end2 - start2)) / (end1 - start1) + start2; 209 | return remapped > 0 ? remapped : 0; 210 | }; 211 | 212 | const animate = () => { 213 | clearContext(); 214 | circles.current.forEach((circle: Circle, i: number) => { 215 | // Handle the alpha value 216 | const edge = [ 217 | circle.x + circle.translateX - circle.size, // distance from left edge 218 | canvasSize.current.w - circle.x - circle.translateX - circle.size, // distance from right edge 219 | circle.y + circle.translateY - circle.size, // distance from top edge 220 | canvasSize.current.h - circle.y - circle.translateY - circle.size, // distance from bottom edge 221 | ]; 222 | const closestEdge = edge.reduce((a, b) => Math.min(a, b)); 223 | const remapClosestEdge = parseFloat( 224 | remapValue(closestEdge, 0, 20, 0, 1).toFixed(2), 225 | ); 226 | if (remapClosestEdge > 1) { 227 | circle.alpha += 0.02; 228 | if (circle.alpha > circle.targetAlpha) { 229 | circle.alpha = circle.targetAlpha; 230 | } 231 | } else { 232 | circle.alpha = circle.targetAlpha * remapClosestEdge; 233 | } 234 | circle.x += circle.dx + vx; 235 | circle.y += circle.dy + vy; 236 | circle.translateX += 237 | (mouse.current.x / (staticity / circle.magnetism) - circle.translateX) / 238 | ease; 239 | circle.translateY += 240 | (mouse.current.y / (staticity / circle.magnetism) - circle.translateY) / 241 | ease; 242 | 243 | drawCircle(circle, true); 244 | 245 | // circle gets out of the canvas 246 | if ( 247 | circle.x < -circle.size || 248 | circle.x > canvasSize.current.w + circle.size || 249 | circle.y < -circle.size || 250 | circle.y > canvasSize.current.h + circle.size 251 | ) { 252 | // remove the circle from the array 253 | circles.current.splice(i, 1); 254 | // create a new circle 255 | const newCircle = circleParams(); 256 | drawCircle(newCircle); 257 | // update the circle position 258 | } 259 | }); 260 | window.requestAnimationFrame(animate); 261 | }; 262 | 263 | return ( 264 | 267 | ); 268 | }; 269 | 270 | export default Particles; 271 | -------------------------------------------------------------------------------- /src/Components/magicui/icon-cloud.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { useEffect, useMemo, useState } from "react"; 4 | import { useTheme } from "next-themes"; 5 | import { 6 | Cloud, 7 | fetchSimpleIcons, 8 | ICloud, 9 | renderSimpleIcon, 10 | SimpleIcon, 11 | } from "react-icon-cloud"; 12 | 13 | export const cloudProps: Omit = { 14 | containerProps: { 15 | style: { 16 | display: "flex", 17 | justifyContent: "center", 18 | alignItems: "center", 19 | width: "100%", 20 | paddingTop: 40, 21 | }, 22 | }, 23 | options: { 24 | reverse: true, 25 | depth: 1, 26 | wheelZoom: false, 27 | imageScale: 2, 28 | activeCursor: "default", 29 | tooltip: "native", 30 | initial: [0.1, -0.1], 31 | clickToFront: 500, 32 | tooltipDelay: 0, 33 | outlineColour: "#0000", 34 | maxSpeed: 0.07, 35 | minSpeed: 0.05, 36 | // dragControl: false, 37 | }, 38 | }; 39 | 40 | export const renderCustomIcon = (icon: SimpleIcon, theme: string) => { 41 | const bgHex = theme === "light" ? "#f3f2ef" : "#080510"; 42 | const fallbackHex = theme === "light" ? "#6e6e73" : "#ffffff"; 43 | const minContrastRatio = theme === "dark" ? 2 : 1.2; 44 | 45 | return renderSimpleIcon({ 46 | icon, 47 | bgHex, 48 | fallbackHex, 49 | minContrastRatio, 50 | size: 50, 51 | aProps: { 52 | href: undefined, 53 | target: undefined, 54 | rel: undefined, 55 | onClick: (e: any) => e.preventDefault(), 56 | }, 57 | }); 58 | }; 59 | 60 | export type DynamicCloudProps = { 61 | iconSlugs: string[]; 62 | }; 63 | 64 | type IconData = Awaited>; 65 | 66 | export default function IconCloud({ iconSlugs }: DynamicCloudProps) { 67 | const [data, setData] = useState(null); 68 | const { theme } = useTheme(); 69 | 70 | useEffect(() => { 71 | fetchSimpleIcons({ slugs: iconSlugs }).then(setData); 72 | }, [iconSlugs]); 73 | 74 | const renderedIcons = useMemo(() => { 75 | if (!data) return null; 76 | 77 | return Object.values(data.simpleIcons).map((icon) => 78 | renderCustomIcon(icon, theme || "light"), 79 | ); 80 | }, [data, theme]); 81 | 82 | return ( 83 | // @ts-ignore 84 | 85 | // @ts-ignore 86 | <>{renderedIcons} 87 | 88 | ); 89 | } 90 | -------------------------------------------------------------------------------- /src/Components/magicui/neon-gradient-card.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { 4 | CSSProperties, 5 | ReactElement, 6 | ReactNode, 7 | useEffect, 8 | useRef, 9 | useState, 10 | } from "react"; 11 | 12 | import { clsx, type ClassValue } from "clsx" 13 | import { twMerge } from "tailwind-merge" 14 | 15 | export function cn(...inputs: ClassValue[]) { 16 | return twMerge(clsx(inputs)) 17 | } 18 | 19 | interface NeonColorsProps { 20 | firstColor: string; 21 | secondColor: string; 22 | } 23 | 24 | interface NeonGradientCardProps { 25 | /** 26 | * @default
27 | * @type ReactElement 28 | * @description 29 | * The component to be rendered as the card 30 | * */ 31 | as?: ReactElement; 32 | /** 33 | * @default "" 34 | * @type string 35 | * @description 36 | * The className of the card 37 | */ 38 | className?: string; 39 | 40 | /** 41 | * @default "" 42 | * @type ReactNode 43 | * @description 44 | * The children of the card 45 | * */ 46 | children?: ReactNode; 47 | 48 | /** 49 | * @default 5 50 | * @type number 51 | * @description 52 | * The size of the border in pixels 53 | * */ 54 | borderSize?: number; 55 | 56 | /** 57 | * @default 20 58 | * @type number 59 | * @description 60 | * The size of the radius in pixels 61 | * */ 62 | borderRadius?: number; 63 | 64 | /** 65 | * @default "{ firstColor: '#ff00aa', secondColor: '#00FFF1' }" 66 | * @type string 67 | * @description 68 | * The colors of the neon gradient 69 | * */ 70 | neonColors?: NeonColorsProps; 71 | 72 | [key: string]: any; 73 | } 74 | 75 | const NeonGradientCard: React.FC = ({ 76 | className, 77 | children, 78 | borderSize = 4, 79 | borderRadius = 9999, 80 | neonColors = { 81 | firstColor: "#ff00aa", 82 | secondColor: "#00FFF1", 83 | }, 84 | ...props 85 | }) => { 86 | const containerRef = useRef(null); 87 | const [dimensions, setDimensions] = useState({ width: 0, height: 0 }); 88 | 89 | useEffect(() => { 90 | const updateDimensions = () => { 91 | if (containerRef.current) { 92 | const { offsetWidth, offsetHeight } = containerRef.current; 93 | setDimensions({ width: offsetWidth, height: offsetHeight }); 94 | } 95 | }; 96 | 97 | updateDimensions(); 98 | window.addEventListener("resize", updateDimensions); 99 | 100 | return () => { 101 | window.removeEventListener("resize", updateDimensions); 102 | }; 103 | }, []); 104 | 105 | useEffect(() => { 106 | if (containerRef.current) { 107 | const { offsetWidth, offsetHeight } = containerRef.current; 108 | setDimensions({ width: offsetWidth, height: offsetHeight }); 109 | } 110 | }, [children]); 111 | 112 | return ( 113 |
136 |
150 | {children} 151 |
152 |
153 | ); 154 | }; 155 | 156 | export { NeonGradientCard }; 157 | -------------------------------------------------------------------------------- /src/Firebase.tsx: -------------------------------------------------------------------------------- 1 | import { initializeApp } from "firebase/app"; 2 | import { getFirestore } from "firebase/firestore"; 3 | const firebaseConfig = { 4 | apiKey: "AIzaSyAKBORqvwwoVPavQjWYRBsIiKsPpnAzMDI", 5 | authDomain: "portfolio-3d62f.firebaseapp.com", 6 | projectId: "portfolio-3d62f", 7 | storageBucket: "portfolio-3d62f.appspot.com", 8 | messagingSenderId: "174398431968", 9 | appId: "1:174398431968:web:ba76399a67746f87776685", 10 | measurementId: "G-J9L99MMQC0" 11 | }; 12 | 13 | const app = initializeApp(firebaseConfig); 14 | export const db = getFirestore(app); -------------------------------------------------------------------------------- /src/User.tsx: -------------------------------------------------------------------------------- 1 | import { IconBrandGithub, IconBrandInstagram, IconBrandLeetcode, IconBrandLinkedin, IconBrandYoutube } from "@tabler/icons-react"; 2 | const Info = { 3 | name: "Chandrabhan Maurya", 4 | stack: ["Software Engineer", "Full Stack Developer", "Competitive Programmer", "Freelancer", "Open Source Contributor"], 5 | bio: "I'm a passionate software engineer specialized in crafting efficient and scalable solutions, deliver top-notch web applications, and provide freelance services that exceed client expectations. Let's connect and create something amazing together!" 6 | } 7 | 8 | 9 | 10 | const ProjectInfo = [ 11 | { 12 | title: "Ekart E-comm App", 13 | desc: "Ekart is a modern, fully responsive e-commerce platform built using React, TailwindCSS, Heroicons, and HeadlessUI, offering a seamless shopping experience across all devices. It features secure user authentication with login, registration, and logout functionalities. Users can add items to a wishlist or remove them, search for specific products, and add them to a shopping cart for purchase. The checkout process includes form validation for address and payment information, ensuring accuracy and security. After purchase, users can view their order history in the Orders section. Ekart combines robust functionality with a sleek, intuitive design, making online shopping effortless and enjoyable.", 14 | image: "Ekart.png", 15 | live: true, 16 | technologies: ["React", "Tailwind", "Redux", "Heroicons", "HeadlessUI"], 17 | link: "https://code-mars.github.io/Ekart/", 18 | github: "https://github.com/Code-Mars/Ekart/" 19 | }, 20 | { 21 | title: "Facebook Clone", 22 | desc: "Facebook Clone is a full-stack web application that replicates the core features of Facebook, including user authentication, posting, and commenting. The front end is built with React, TailwinCSS, Tabler-Icons, Mantine and Firebase, while the back end uses Firebase for user authentication and data storage. Users can create an account, log in, post updates, and comment on posts. The app features real-time updates, so users can see new comments as they are posted. Facebook Clone provides a seamless user experience with a clean, modern design and intuitive functionality.", 23 | image: "Facebook.png", 24 | live: false, 25 | technologies: ["React", "Springboot", "MongoDB", "Tailwind", "Tabler-Icons", "Firebase"], 26 | link: "https://github.com/Code-Mars/Facebook-Clone", 27 | github: "https://github.com/Code-Mars/Facebook-Clone" 28 | }, 29 | { 30 | title: "Spotify Clone", 31 | desc: "Spotify Clone is a full-stack web application that replicates the core features of Spotify, including user authentication, music playback, and playlist creation. The front end is built with React, TailwindCSS, Heroicons, and Firebase, while the back end uses Firebase for user authentication and data storage. Users can create an account, log in, search for songs, and create playlists. The app features real-time updates, so users can see new songs as they are added. Spotify Clone provides a seamless user experience with a clean, modern design and intuitive functionality.", 32 | image: "Spotify.png", 33 | live: false, 34 | technologies: ["React", "Springboot", "Tailwind", "Tabler-Icons", "MongoDB", "Firebase"], 35 | link: "https://github.com/Code-Mars/Spotify-Clone", 36 | github: "https://github.com/Code-Mars/Spotify-Clone" 37 | }, 38 | { 39 | title: "Travel Tracker", 40 | desc: "Travel Tracker is a full-stack web application that allows users to track their travel experiences and share them with others. The front end is built with React, Bootstrap, while the back end uses Node.js, Express, and PostgresSQL. Users can create an account, log in, add new trips, and view their past trips on a map. The app features a clean, modern design with interactive maps and a user-friendly interface. Travel Tracker combines functionality with style, making it easy and enjoyable to record and share travel memories.", 41 | image: "Travel.png", 42 | live: false, 43 | technologies: ["React", "Node.js", "PostgresSQL", "Express", "Bootstrap"], 44 | link: "https://github.com/Code-Mars/Travel-Tracker", 45 | github: "https://github.com/Code-Mars/Travel-Tracker" 46 | }, 47 | { 48 | title: "Instagram Clone", 49 | desc: "Instagram Clone is a full-stack web application that replicates the core features of Instagram, including user authentication, image uploading, and commenting. The front end is built with React, TailwindCSS, and Heroicons, while the back end uses Firebase for user authentication and image storage. Users can create an account, log in, upload images, and comment on posts. The app features real-time updates, so users can see new comments as they are posted. Instagram Clone provides a seamless user experience with a clean, modern design and intuitive functionality.", 50 | image: "Instagram.png", 51 | live: false, 52 | technologies: ["React", "Springboot", "Tailwind", "Heroicons", "Firebase", "MongoDB"], 53 | link: "https://github.com/Code-Mars/Instagram-Clone", 54 | github: "https://github.com/Code-Mars/Instagram-Clone" 55 | }, 56 | { 57 | title: "CodeX Code Editor", 58 | desc: "CodeX is a modern, fully responsive code editor built using React, TailwindCSS, and Ace Editor, offering a seamless coding experience across all devices. It features syntax highlighting for popular programming languages, including HTML, CSS, JavaScript, Python, and Java. Users can create, edit, and save code files, with the option to download them as text files. CodeX combines robust functionality with a sleek, intuitive design, making coding effortless and enjoyable.", 59 | image: "CodeX.png", 60 | live: false, 61 | technologies: ["React", "Tailwind", "Ace Editor"], 62 | link: "https://github.com/Code-Mars/CodeX", 63 | github: "https://github.com/Code-Mars/CodeX" 64 | } 65 | ] 66 | 67 | 68 | const SkillInfo = [ 69 | { 70 | title: "Frontend", 71 | skills: ["HTML", "CSS", "SASS", "JavaScript", "React JS", "Angular", "Redux", "Tailwind CSS", "GSAP", "Material UI", "Bootstrap" 72 | ] 73 | }, 74 | { 75 | title: "Backend", 76 | skills: ["Springboot", "Node JS", "Express JS", "MySQL", "MongoDB", "Firebase", "PostgresSQL"] 77 | }, 78 | { 79 | title: "Languages", 80 | skills: ["C", "C++", "Java", "JavaScript", "TypeScript"] 81 | }, 82 | { 83 | title: "Tools", 84 | skills: ["Git", "Github", "VS Code", "Postman", "MongoDB Compass", "Spring Tool Suite"] 85 | } 86 | ] 87 | const socialLinks = [ 88 | { link: "https://github.com/Code-Mars", icon: IconBrandGithub }, 89 | { link: "https://www.linkedin.com/in/chandrabhan-maurya", icon: IconBrandLinkedin }, 90 | { link: "https://www.instagram.com/code.marshal_", icon: IconBrandInstagram }, 91 | { link: "https://www.youtube.com/channel/UC1ki6jaFvFiH_E79b9FYptw", icon: IconBrandYoutube }, 92 | { link: "https://www.leetcode.com/u/CodeMars", icon: IconBrandLeetcode } 93 | ]; 94 | 95 | 96 | const ExperienceInfo = [ 97 | { 98 | role: "Specialist Programmer", 99 | company: "Infosys", 100 | date: "Oct 2023 - Present", 101 | desc: "I led software development with Spring Boot, React, and Angular, creating scalable microservices and interfaces. I optimized performance by integrating frontend and backend, and enhanced security with RESTful APIs. Collaborating in agile teams, I fostered innovation and efficiency for top-quality solutions.", 102 | skills: ["Springboot", "React JS", "Angular", "Node JS", "MySQL", "MongoDB", "Microservices"] 103 | }, 104 | { 105 | role: "System Engineer", 106 | company: "Infosys", 107 | date: "Nov 2022 - Sep 2023", 108 | desc: " I leveraged my skills in Java, Selenium, automation testing, and MySQL to design and implement automated testing frameworks, ensuring robust software validation. I optimized database performance and reliability, and collaborated with cross-functional teams to enhance system operations and ensure seamless integration.", 109 | skills: ["Java", "MySQL", "Hibernate", "Selenium", "Jenkins", "JIRA", "Automation Testing"] 110 | } 111 | ] 112 | const Slugs = [ 113 | "typescript", 114 | "spring", 115 | "javascript", 116 | "dart", 117 | "java", 118 | "react", 119 | "angular", 120 | "flutter", 121 | "android", 122 | "html5", 123 | "css3", 124 | "springboot", 125 | "mongodb", 126 | "selenium", 127 | "nodedotjs", 128 | "express", 129 | "nextdotjs", 130 | "prisma", 131 | "mysql", 132 | "amazonaws", 133 | "postgresql", 134 | "firebase", 135 | "nginx", 136 | "vercel", 137 | "testinglibrary", 138 | "jest", 139 | "cypress", 140 | "docker", 141 | "git", 142 | "jira", 143 | "github", 144 | "gitlab", 145 | "visualstudiocode", 146 | "androidstudio", 147 | "sonarqube", 148 | "figma", 149 | ]; 150 | export { Info, ProjectInfo,socialLinks, SkillInfo, ExperienceInfo, Slugs }; -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | html{ 6 | --primary-color:"#64FFDA"; 7 | scroll-behavior: smooth; 8 | } 9 | ::-webkit-scrollbar-track 10 | { 11 | border-radius: 10px; 12 | background-color: #112240; 13 | } 14 | 15 | ::-webkit-scrollbar 16 | { 17 | width: 4px; 18 | background-color: #112240; 19 | } 20 | 21 | ::-webkit-scrollbar-thumb 22 | { 23 | border-radius: 10px; 24 | background-color: #64FFDA; 25 | } -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot( 8 | document.getElementById('root') as HTMLElement 9 | ); 10 | root.render( 11 | 12 | 13 | 14 | ); 15 | reportWebVitals(); 16 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./src/**/*.{js,jsx,ts,tsx}", 5 | ], 6 | theme: { 7 | extend: { 8 | colors: { 9 | bgColor: "#112240", 10 | primaryColor: "#64FFDA", 11 | textColor: "#8892B0" 12 | }, 13 | animation: { 14 | backgroundPositionSpin: 15 | "background-position-spin 3000ms infinite alternate", 16 | }, 17 | keyframes: { 18 | "background-position-spin": { 19 | "0%": { backgroundPosition: "top center" }, 20 | "100%": { backgroundPosition: "bottom center" }, 21 | }, 22 | }, 23 | }, 24 | screens: { 25 | 'xsm': '350px', 26 | 'xs': '476px', 27 | 'sm': '640px', 28 | 'md': '768px', 29 | 'bs': '900px', 30 | 'lg': '1024px', 31 | 'xl': '1280px', 32 | '2xl': '1536px', 33 | 34 | 35 | '2xl-mx': { 'max': '1535px' }, 36 | 'xl-mx': { 'max': '1279px' }, 37 | 'lg-mx': { 'max': '1023px' }, 38 | 'bs-mx': { 'max': '899px' }, 39 | 'md-mx': { 'max': '767px' }, 40 | 'sm-mx': { 'max': '639px' }, 41 | 'xs-mx': { 'max': '475px' }, 42 | 'xsm-mx': { 'max': '349px' } 43 | } 44 | 45 | }, 46 | plugins: [], 47 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------