├── .eslintrc.cjs ├── .github ├── ISSUE_TEMPLATE │ ├── custom.md │ └── feature_request.md └── dependabot.yml ├── .gitignore ├── .prettierrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── dist ├── _redirects └── index.html ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── _redirects ├── src ├── App.css ├── App.jsx ├── Assets │ ├── bars.svg │ ├── images │ │ ├── 1490.gif │ │ ├── AboutImage.png │ │ ├── Gridlinesbuilders.jpg │ │ ├── adminpanel.jpg │ │ ├── imagedeveloper.png │ │ ├── logor.png │ │ ├── netflix.jpg │ │ ├── olximage.jpg │ │ ├── pizza.jpg │ │ ├── profile.jpg │ │ └── todolist.jpg │ └── svg │ │ └── skills │ │ ├── adobe-xd.svg │ │ ├── adobeaudition.svg │ │ ├── after-effects.svg │ │ ├── angular.svg │ │ ├── aws.svg │ │ ├── azure.svg │ │ ├── blender.svg │ │ ├── bootstrap.svg │ │ ├── bulma.svg │ │ ├── c.svg │ │ ├── canva.svg │ │ ├── capacitorjs.svg │ │ ├── coffeescript.svg │ │ ├── cplusplus.svg │ │ ├── csharp.svg │ │ ├── css.svg │ │ ├── dart.svg │ │ ├── deno.svg │ │ ├── django.svg │ │ ├── docker.svg │ │ ├── fastify.svg │ │ ├── figma.svg │ │ ├── firebase.svg │ │ ├── flutter.svg │ │ ├── gcp.svg │ │ ├── gimp.svg │ │ ├── git.svg │ │ ├── go.svg │ │ ├── graphql.svg │ │ ├── haxe.svg │ │ ├── html.svg │ │ ├── illustrator.svg │ │ ├── ionic.svg │ │ ├── java.svg │ │ ├── javascript.svg │ │ ├── julia.svg │ │ ├── kotlin.svg │ │ ├── lightroom.svg │ │ ├── markdown.svg │ │ ├── materialui.svg │ │ ├── matlab.svg │ │ ├── memsql.svg │ │ ├── microsoftoffice.svg │ │ ├── mongoDB.svg │ │ ├── mysql.svg │ │ ├── nextJS.svg │ │ ├── nginx.svg │ │ ├── numpy.svg │ │ ├── nuxtJS.svg │ │ ├── opencv.svg │ │ ├── photoshop.svg │ │ ├── php.svg │ │ ├── picsart.svg │ │ ├── postgresql.svg │ │ ├── premierepro.svg │ │ ├── python.svg │ │ ├── pytorch.svg │ │ ├── react.svg │ │ ├── ruby.svg │ │ ├── selenium.svg │ │ ├── sketch.svg │ │ ├── sqlite.svg │ │ ├── strapi.svg │ │ ├── svelte.svg │ │ ├── swift.svg │ │ ├── tailwind.svg │ │ ├── tensorflow.svg │ │ ├── typescript.svg │ │ ├── unity.svg │ │ ├── vitejs.svg │ │ ├── vue.svg │ │ ├── vuetifyjs.svg │ │ ├── webix.svg │ │ ├── wolframalpha.svg │ │ └── wordpress.svg ├── components │ ├── Cards.jsx │ ├── Cursor.jsx │ ├── Footer.jsx │ ├── Header.jsx │ ├── Pre.jsx │ └── TypewriterText.jsx ├── data │ ├── ProjectsList.jsx │ ├── SkillsData.jsx │ └── UserData.jsx ├── main.jsx ├── pages │ ├── About.jsx │ ├── ArchiveProjects.jsx │ ├── Contact.jsx │ ├── Home.jsx │ ├── Layout.jsx │ ├── NotFound.jsx │ └── Project.jsx └── utils │ └── SkillsImage.js ├── tailwind.config.js └── vite.config.js /.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | 3 | module.exports = { 4 | env: { browser: true, es2020: true }, 5 | extends: [ 6 | 'eslint:recommended', 7 | 'plugin:react/recommended', 8 | 'plugin:react/jsx-runtime', 9 | 'plugin:react-hooks/recommended', 10 | ], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/custom.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Custom issue template 3 | about: Describe this issue template's purpose here. 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["prettier-plugin-tailwindcss"] 3 | } 4 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | . 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Rahul Vijay Portfolio 2 | 3 | Thank you for your interest in contributing to Rahul Vijay's portfolio! Your contributions are valuable and can help enhance the overall quality of the portfolio. Whether you're fixing a bug, adding a feature, or suggesting improvements, your efforts are appreciated. 4 | 5 | ## Getting Started 6 | 7 | To contribute to Rahul Vijay Portfolio, follow these steps: 8 | 9 | 1. Fork the repository on GitHub. 10 | 2. Clone your forked repository to your local machine. 11 | 12 | ```bash 13 | git clone https://github.com/your-username/rahul-vijay-portfolio.git 14 | ``` 15 | 16 | 3. Create a new branch for your changes. 17 | 18 | ```bash 19 | git checkout -b feature/your-feature 20 | ``` 21 | 22 | 4. Make your changes and commit them. 23 | 24 | ```bash 25 | git commit -m "Add your changes" 26 | ``` 27 | 28 | 5. Push your changes to your fork on GitHub. 29 | 30 | ```bash 31 | git push origin feature/your-feature 32 | ``` 33 | 34 | 6. Open a pull request in the original repository. 35 | 36 | ## Coding Standards 37 | 38 | - Follow the coding standards and best practices of the project. 39 | - Write clear and concise code. 40 | - Document your code when necessary. 41 | 42 | ## Bug Reports 43 | 44 | If you find a bug in Rahul Vijay Portfolio, please follow these steps: 45 | 46 | 1. Check the existing issues to see if the bug has already been reported. 47 | 2. If not, create a new issue, providing a detailed description of the bug and steps to reproduce it. 48 | 49 | ## Feature Requests 50 | 51 | If you have an idea for a new feature or enhancement, please follow these steps: 52 | 53 | 1. Check the existing issues to see if the feature has already been requested. 54 | 2. If not, create a new issue, describing the feature and its use case. 55 | 56 | ## Pull Requests 57 | 58 | When submitting a pull request, please: 59 | 60 | 1. Provide a clear and concise title. 61 | 2. Describe the purpose and scope of the pull request. 62 | 3. Reference any related issues. 63 | 4. Include before and after screenshots for visual changes. 64 | 5. Ensure that your code passes any existing tests. 65 | 6. Make sure your branch is up-to-date with the latest changes from the main branch. 66 | 67 | ## Code of Conduct 68 | 69 | Please note that Rahul Vijay Portfolio has a Code of Conduct. By participating in this project, you agree to abide by its terms. Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at rahulvijay8156@gmail.com. 70 | 71 | ## Thank You 72 | 73 | Thank you for contributing to Rahul Vijay Portfolio! Your time and efforts are highly valued. If you have any questions or need further assistance, feel free to reach out to the project team. 74 | 75 | Happy coding! 76 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 Rahul Vijay 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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Personal Portfolio 2 | 3 | ![Rahul-Portfolio](https://user-images.githubusercontent.com/118264222/224553983-d0782a0a-7fb0-479e-a491-c7124b286d03.png) 4 | 5 | ![Rahul-Vijay](https://github.com/rahulvijay81/portfolio/Assets/118264222/a01b51ac-3908-4f70-9a02-5fdaecf570fc) 6 | 7 | This is my personal portfolio website built with React.js and Tailwindcss, showcasing my skills and projects. The website is designed and created entirely by me, Rahul Vijay. 8 | 9 | ## Features 10 | 11 | - **Multiple Pages (React Router):** The website is built with React Router v6 to enable easy access to multiple pages, showcasing various aspects of my skills and projects. 12 | 13 | - **Fully Responsive:** The website is fully responsive and works flawlessly on all devices, ensuring a seamless user experience across different screen sizes. 14 | 15 | - **Modern Design:** The portfolio website features a modern and visually appealing design, utilizing animations to add an interactive touch to the user interface. 16 | 17 | ## Deployment 18 | 19 | The website is correctly bundled with React in production mode, ensuring optimized build for the best performance. The build is minified, and the filenames include hashes to improve caching. 20 | 21 | For more information about deploying a React application, refer to the [deployment documentation](https://facebook.github.io/create-react-app/docs/deployment). 22 | 23 | ## How to Run the Project 24 | 25 | 1. Clone this repository to your local machine: 26 | ``` 27 | git clone https://github.com/rahulvijay81/portfolio.git 28 | ``` 29 | 30 | 2. Navigate to the project directory: 31 | ``` 32 | cd portfolio 33 | ``` 34 | 35 | 3. Install the required dependencies: 36 | ``` 37 | npm install 38 | ``` 39 | 40 | 4. Run the development server: 41 | ``` 42 | npm run dev 43 | ``` 44 | 45 | The website will be available at `http://localhost:5173` in your web browser. 46 | 47 | ## Featured 48 | 49 | https://reactjsexample.com/24-best-free-open-source-react-portfolio-page-templates/ 50 | 51 | ## Contact Information 52 | 53 | You can reach out to me via email at [rahulvijay8156@gmail.com](mailto:rahulvijay8156@gmail.com) or connect with me on [LinkedIn](https://www.linkedin.com/in/rahulvijay81/). 54 | 55 | Feel free to explore my portfolio and learn more about my skills and projects. Thank you for visiting! 🙏 56 | 57 | --- 58 | 59 | Please note that the information provided in this README is subject to change as the project evolves and grows. 60 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | Use this section to tell people about which versions of your project are 6 | currently being supported with security updates. 7 | 8 | | Version | Supported | 9 | | ------- | ------------------ | 10 | | 5.1.x | :white_check_mark: | 11 | | 5.0.x | :x: | 12 | | 4.0.x | :white_check_mark: | 13 | | < 4.0 | :x: | 14 | 15 | ## Reporting a Vulnerability 16 | 17 | Use this section to tell people how to report a vulnerability. 18 | 19 | Tell them where to go, how often they can expect to get an update on a 20 | reported vulnerability, what to expect if the vulnerability is accepted or 21 | declined, etc. 22 | -------------------------------------------------------------------------------- /dist/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rahul Vijay 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Rahul Vijay 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "portfolio", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@types/bootstrap": "^5.2.6", 14 | "framer-motion": "^10.12.22", 15 | "gsap": "^3.12.5", 16 | "react": "^18.2.0", 17 | "react-dom": "^18.2.0", 18 | "react-fast-marquee": "^1.6.0", 19 | "react-icons": "^4.10.1", 20 | "react-router-dom": "^6.14.2", 21 | "react-scroll": "^1.9.0", 22 | "typewriter-effect": "^2.20.1" 23 | }, 24 | "devDependencies": { 25 | "@types/react": "^18.2.14", 26 | "@types/react-dom": "^18.2.6", 27 | "@vitejs/plugin-react": "^4.0.3", 28 | "autoprefixer": "^10.4.19", 29 | "eslint": "^8.44.0", 30 | "eslint-plugin-react": "^7.32.2", 31 | "eslint-plugin-react-hooks": "^4.6.0", 32 | "eslint-plugin-react-refresh": "^0.4.1", 33 | "postcss": "^8.4.38", 34 | "prettier": "^3.2.5", 35 | "prettier-plugin-tailwindcss": "^0.5.14", 36 | "tailwindcss": "^3.4.3", 37 | "vite": "^5.4.14" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/_redirects: -------------------------------------------------------------------------------- 1 | /* /index.html 200 -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500&display=swap"); 2 | @import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap"); 3 | 4 | @tailwind base; 5 | @tailwind components; 6 | @tailwind utilities; 7 | 8 | body { 9 | font-family: "Raleway", serif !important; 10 | -webkit-font-smoothing: antialiased; 11 | -moz-osx-font-smoothing: grayscale; 12 | background-color: #c850c0; 13 | background-image: linear-gradient( 14 | 43deg, 15 | #4158d0 0%, 16 | #c850c0 46%, 17 | #ffcc70 100% 18 | ); 19 | } 20 | html { 21 | scroll-behavior: smooth; 22 | } 23 | * { 24 | margin: 0; 25 | } 26 | #no-scroll { 27 | overflow: hidden; 28 | height: 100vh; 29 | } 30 | 31 | #preloader { 32 | position: fixed; 33 | top: 0; 34 | left: 0; 35 | width: 100%; 36 | height: 100%; 37 | z-index: 999999; 38 | background-color: #c850c0; 39 | background-image: url(../src/Assets/bars.svg); 40 | background-repeat: no-repeat; 41 | background-position: center; 42 | } 43 | #preloader-none { 44 | opacity: 0; 45 | } 46 | 47 | /* --------- */ 48 | /*Scrollbar */ 49 | /* --------- */ 50 | 51 | ::-webkit-scrollbar { 52 | width: 3px; 53 | } 54 | 55 | /* Track */ 56 | ::-webkit-scrollbar-track { 57 | background-color: #c850c0; 58 | background-image: linear-gradient( 59 | 43deg, 60 | #4158d0 0%, 61 | #c850c0 46%, 62 | #ffcc70 100% 63 | ); 64 | } 65 | 66 | /* Handle */ 67 | ::-webkit-scrollbar-thumb { 68 | background-color: #c850c0; 69 | border-radius: 8px; 70 | } 71 | 72 | /* Handle on hover */ 73 | ::-webkit-scrollbar-thumb:hover { 74 | background: rgba(0, 0, 0, 0.911); 75 | border-radius: 3px; 76 | } 77 | 78 | .icon { 79 | font-size: 30px; 80 | } 81 | .font-poppins { 82 | font-family: "Poppins"; 83 | } 84 | .sticky { 85 | transition: all 0.3s ease-out 0s !important; 86 | box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important; 87 | backdrop-filter: blur(15px) !important; 88 | } 89 | .navbar-bg{ 90 | background-color: #4158d0; 91 | background-image: linear-gradient( 92 | 43deg, 93 | #4158d0 0%, 94 | #c850c0 0%, 95 | #ffcc70 100% 96 | ); 97 | } 98 | .button-UI { 99 | background-image: linear-gradient(43deg, #4158d0 0%, #c850c0 100%); 100 | } 101 | .wave { 102 | animation-name: wave-animation; /* Refers to the name of your @keyframes element below */ 103 | animation-duration: 2.1s; /* Change to speed up or slow down */ 104 | animation-iteration-count: infinite; /* Never stop waving :) */ 105 | transform-origin: 70% 70%; /* Pivot around the bottom-left palm */ 106 | display: inline-block; 107 | } 108 | 109 | @keyframes wave-animation { 110 | 0% { 111 | transform: rotate(0deg); 112 | } 113 | 10% { 114 | transform: rotate(14deg); 115 | } /* The following five values can be played with to make the waving more or less extreme */ 116 | 20% { 117 | transform: rotate(-8deg); 118 | } 119 | 30% { 120 | transform: rotate(14deg); 121 | } 122 | 40% { 123 | transform: rotate(-4deg); 124 | } 125 | 50% { 126 | transform: rotate(10deg); 127 | } 128 | 60% { 129 | transform: rotate(0deg); 130 | } /* Reset for the last half to pause */ 131 | 100% { 132 | transform: rotate(0deg); 133 | } 134 | } 135 | 136 | 137 | .Typewriter__wrapper { 138 | font-size: 2em !important; 139 | color: #191919 !important; 140 | font-weight: 600 !important; 141 | letter-spacing: 1px !important; 142 | } 143 | .Typewriter__cursor { 144 | font-size: 2.4em !important; 145 | color: #191919 !important; 146 | } 147 | @media (max-width: 767px) { 148 | .cursor{ 149 | display: none; 150 | } 151 | .Typewriter__wrapper { 152 | font-size: 1.6em !important; 153 | color: #191919 !important; 154 | font-weight: 600 !important; 155 | letter-spacing: 1px !important; 156 | } 157 | .Typewriter__cursor { 158 | font-size: 1.4em !important; 159 | color: #191919 !important; 160 | } 161 | } -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { 3 | BrowserRouter as Router, 4 | Routes, 5 | Route, 6 | useLocation, 7 | } from "react-router-dom"; 8 | import Preloader from "../src/components/Pre"; 9 | import About from "./pages/About"; 10 | import Contact from "./pages/Contact"; 11 | import Cursor from "../src/components/Cursor"; 12 | import Layout from "./pages/Layout"; 13 | import ArchiveProjects from "./pages/ArchiveProjects"; 14 | import NotFound from "./pages/NotFound"; 15 | import "./App.css"; 16 | 17 | function ScrollToTopOnRouteChange() { 18 | const { pathname } = useLocation(); 19 | 20 | useEffect(() => { 21 | window.scrollTo(0, 0); 22 | }, [pathname]); 23 | 24 | return null; 25 | } 26 | 27 | function App() { 28 | const [load, updateLoad] = useState(true); 29 | 30 | useEffect(() => { 31 | const timer = setTimeout(() => { 32 | updateLoad(false); 33 | }, 1200); 34 | 35 | return () => clearTimeout(timer); 36 | }, []); 37 | 38 | return ( 39 |
40 | {/* */} 41 | 42 | 43 |
44 | 45 | 46 | } /> 47 | } /> 48 | } /> 49 | } /> 50 | } /> 51 | 52 |
53 | 54 |
55 | ); 56 | } 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /src/Assets/bars.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 11 | 12 | 13 | 17 | 21 | 22 | 23 | 27 | 31 | 32 | 33 | 37 | 41 | 42 | 43 | 47 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /src/Assets/images/1490.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/1490.gif -------------------------------------------------------------------------------- /src/Assets/images/AboutImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/AboutImage.png -------------------------------------------------------------------------------- /src/Assets/images/Gridlinesbuilders.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/Gridlinesbuilders.jpg -------------------------------------------------------------------------------- /src/Assets/images/adminpanel.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/adminpanel.jpg -------------------------------------------------------------------------------- /src/Assets/images/imagedeveloper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/imagedeveloper.png -------------------------------------------------------------------------------- /src/Assets/images/logor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/logor.png -------------------------------------------------------------------------------- /src/Assets/images/netflix.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/netflix.jpg -------------------------------------------------------------------------------- /src/Assets/images/olximage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/olximage.jpg -------------------------------------------------------------------------------- /src/Assets/images/pizza.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/pizza.jpg -------------------------------------------------------------------------------- /src/Assets/images/profile.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/profile.jpg -------------------------------------------------------------------------------- /src/Assets/images/todolist.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rahulvijay81/portfolio/8ce6ed858562cf639664901feac833e4468ab73b/src/Assets/images/todolist.jpg -------------------------------------------------------------------------------- /src/Assets/svg/skills/adobe-xd.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/adobeaudition.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/after-effects.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/angular.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/aws.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/azure.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/blender.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/bootstrap.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/bulma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/c.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/canva.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/capacitorjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/coffeescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/cplusplus.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/csharp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/css.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/dart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/django.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/docker.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/fastify.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/figma.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/firebase.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/flutter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/gcp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/gimp.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/git.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/go.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/graphql.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/haxe.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/html.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/illustrator.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/ionic.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/java.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/javascript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/julia.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/kotlin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/lightroom.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/markdown.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/materialui.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/matlab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/memsql.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/microsoftoffice.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/mongoDB.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/mysql.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/nextJS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/nginx.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/numpy.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/nuxtJS.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/opencv.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/photoshop.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/php.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/picsart.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/premierepro.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/python.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/pytorch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/ruby.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/selenium.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/sketch.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/sqlite.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/strapi.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/svelte.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/swift.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/tailwind.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/tensorflow.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/typescript.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/unity.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/vitejs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/vue.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/vuetifyjs.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/webix.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/wolframalpha.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/Assets/svg/skills/wordpress.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/components/Cards.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { ProjectsList } from "../data/ProjectsList"; 3 | 4 | function Cards() { 5 | const [showFullDescription, setShowFullDescription] = useState(null); 6 | const projectsToDisplay = ProjectsList.projects.slice(0, 4); 7 | 8 | const toggleDescription = (index) => { 9 | console.log("clicking description", index); 10 | 11 | setShowFullDescription(index === showFullDescription ? null : index); 12 | }; 13 | 14 | return ( 15 | <> 16 | {projectsToDisplay.map((project, index) => ( 17 |
21 |

22 | {project.name} 23 |

24 |

25 | {showFullDescription === index 26 | ? project.description 27 | : project.description.substring(0, 120)} 28 | toggleDescription(index)} 31 | > 32 | .... 33 | 34 |

35 |
36 | {project.technologies.map((tech, index) => ( 37 |

41 | {tech} 42 |

43 | ))} 44 |
45 |
46 | ))} 47 | 48 | ); 49 | } 50 | 51 | export default Cards; 52 | -------------------------------------------------------------------------------- /src/components/Cursor.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | const Cursor = () => { 4 | const [mousePositions, setMousePositions] = useState([]); 5 | const [isMoving, setIsMoving] = useState(false); 6 | 7 | useEffect(() => { 8 | const updateMousePosition = (e) => { 9 | setMousePositions((prevPositions) => [ 10 | { x: e.clientX, y: e.clientY }, 11 | ...prevPositions.slice(0, 10), // Keep only the last 10 positions 12 | ]); 13 | }; 14 | 15 | const handleMouseMove = (e) => { 16 | setIsMoving(true); 17 | requestAnimationFrame(() => { 18 | updateMousePosition(e); 19 | setIsMoving(false); 20 | }); 21 | }; 22 | 23 | window.addEventListener("mousemove", handleMouseMove); 24 | 25 | return () => { 26 | window.removeEventListener("mousemove", handleMouseMove); 27 | }; 28 | }, []); 29 | 30 | const cursorStyles = { 31 | position: "fixed", 32 | width: "16px", 33 | height: "16px", 34 | borderRadius: "50%", 35 | backgroundColor: "rgba(25, 25, 25, 0.5)", 36 | pointerEvents: "none", 37 | zIndex: 9999, 38 | }; 39 | 40 | const duplicateCursorStyles = { 41 | ...cursorStyles, 42 | transform: `scale(${isMoving ? 2.0 : 1})`, 43 | transition: "transform 0.05s ease", 44 | animation: `${isMoving ? "pulse 0.5s infinite" : ""}`, 45 | }; 46 | 47 | return ( 48 | <> 49 | {mousePositions.map((position, index) => ( 50 |
61 | ))} 62 | 63 | ); 64 | }; 65 | 66 | export default Cursor; 67 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UserData } from "../data/UserData"; 3 | 4 | function Footer() { 5 | const currentYear = new Date().getFullYear(); 6 | const { FooterLink } = UserData; 7 | 8 | return ( 9 |
10 |
11 | © Copyright {currentYear} Designed & Built by 12 |
13 |
{ 16 | window.open(FooterLink); 17 | }} 18 | > 19 | rahulvijay 20 |
21 |
22 | ); 23 | } 24 | 25 | export default Footer; 26 | -------------------------------------------------------------------------------- /src/components/Header.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Link, Events, scrollSpy } from "react-scroll"; 3 | import { CgMenuRight } from "react-icons/cg"; 4 | import { UserData } from "../data/UserData"; 5 | import logo from "../Assets/images/logor.png"; 6 | 7 | const Header = () => { 8 | const [isScrolling, setisScrolling] = useState(false); 9 | const [activeSection, setActiveSection] = useState(null); 10 | const [mobileMenuOpen, setMobileMenuOpen] = useState(false); 11 | 12 | const { resumeUrl } = UserData; 13 | 14 | useEffect(() => { 15 | const handleScroll = () => { 16 | const scrollTop = window.scrollY; 17 | const isCurrentScrolled = scrollTop > 0; 18 | setisScrolling(isCurrentScrolled); 19 | }; 20 | 21 | window.addEventListener("scroll", handleScroll); 22 | Events.scrollEvent.register("begin", function (to) { 23 | setActiveSection(to); 24 | }); 25 | 26 | scrollSpy.update(); 27 | 28 | return () => { 29 | window.removeEventListener("scroll", handleScroll); 30 | Events.scrollEvent.remove("begin"); 31 | }; 32 | }, []); 33 | 34 | const toggleMobileMenu = () => { 35 | setMobileMenuOpen(!mobileMenuOpen); 36 | }; 37 | 38 | return ( 39 |
43 |
44 | logo 49 |
50 | 136 |
137 | {" "} 138 | {/* Show on small screens */} 139 | 145 |
146 | {/* Mobile menu */} 147 | {mobileMenuOpen && ( 148 | 240 | )} 241 |
242 | ); 243 | }; 244 | 245 | export default Header; 246 | -------------------------------------------------------------------------------- /src/components/Pre.jsx: -------------------------------------------------------------------------------- 1 | function Pre(props) { 2 | return
; 3 | } 4 | 5 | export default Pre; 6 | -------------------------------------------------------------------------------- /src/components/TypewriterText.jsx: -------------------------------------------------------------------------------- 1 | import Typewriter from "typewriter-effect"; 2 | import { UserData } from "../data/UserData"; 3 | 4 | function TypewriterText() { 5 | const { typewriterOptions } = UserData; 6 | return ; 7 | } 8 | 9 | export default TypewriterText; 10 | -------------------------------------------------------------------------------- /src/data/ProjectsList.jsx: -------------------------------------------------------------------------------- 1 | export const ProjectsList = { 2 | projects: [ 3 | { 4 | name: "StratAgile HRMS", 5 | description: 6 | "Stratagile HRMS is a web-based Human Resource Management System built using React. It is designed to streamline HR processes and enhance organizational efficiency by providing a set of features for leave management, employee tracking, alumni management, branch office organization, holiday calendars, and working day schedules.", 7 | technologies: [ 8 | "React JS", 9 | "redux", 10 | "REST APIs", 11 | "axios", 12 | "material UI", 13 | "CSS", 14 | "Git", 15 | "GitHub", 16 | "Figma", 17 | ], 18 | }, 19 | { 20 | name: "Zymsi - Gym Membership Platform", 21 | description: 22 | "Contributed to the frontend development of Zymsi, a platform facilitating flexible gym memberships. Implemented user-friendly interface features and collaborated closely with backend and design teams.", 23 | technologies: [ 24 | "React JS", 25 | "REST APIs", 26 | "axios", 27 | "material UI", 28 | "CSS", 29 | "Git", 30 | "GitHub", 31 | "Figma", 32 | ], 33 | }, 34 | { 35 | name: "Personal Portfolio", 36 | description: 37 | "My portfolio is a website built with React.js and Tailwind CSS, utilizing React Router v6 to enable easy access to multiple pages. It was designed and created entirely by myself, showcasing my skills and projects. The website is responsive and visually appealing, providing a user-friendly experience.", 38 | technologies: ["React JS", "Tailwind CSS", "Git", "GitHub", "Figma"], 39 | }, 40 | { 41 | name: "Dashboard Panel", 42 | description: 43 | "User Admin Dashboard created with React js, Material UI, Nivo Charts, Formik, Yup, FullCalendar, and Data Grid to build this entire application. This application consists of Light and Dark Mode, four different Charts, three different Data Table Pages, FAQ Page, Form Page, and Calendar Integration.", 44 | technologies: ["React JS", "Material UI"], 45 | }, 46 | { 47 | name: "Grid Line Builders", 48 | description: 49 | "Grid line builders is a static webpage built with HTML, CSS, and JavaScript. Users can see images of their work and contact information that helps to connect the home builders through a webpage. webpage builds responsive to multiple sizes of devices.", 50 | technologies: ["HTML", "CSS", "JavaScript"], 51 | }, 52 | { 53 | name: "Netflix-Clone", 54 | description: 55 | "This project is a simplified front-end clone of Netflix. It was created with React js. It uses TMDB (The Movie Data Base ) API and uses the Axios tool. Users can click movie images with embedded YouTube trailers or related videos about the movie.", 56 | technologies: [ 57 | "React JS", 58 | "REST APIs", 59 | "axios", 60 | "CSS", 61 | "Git", 62 | "GitHub", 63 | "Figma", 64 | ], 65 | }, 66 | { 67 | name: "Olx-Clone", 68 | description: 69 | "Olx-clone builds with react js. using firebase as a backend and deploying in firebase. Olx-Clone is a potential classified advertisement website that categorizes objects in a user-friendly manner & displays them as advertisements.. Classifieds can be posted that involve selling, and buying using React-router, context, react hooks", 70 | technologies: [ 71 | "React JS", 72 | "Firebase", 73 | "REST APIs", 74 | "axios", 75 | "CSS", 76 | "Git", 77 | "GitHub", 78 | "Figma", 79 | ], 80 | }, 81 | ], 82 | }; 83 | -------------------------------------------------------------------------------- /src/data/SkillsData.jsx: -------------------------------------------------------------------------------- 1 | export const skillsData = [ 2 | "html", 3 | "CSS", 4 | "Javascript", 5 | "React", 6 | "Next JS", 7 | "ViteJS", 8 | "Git", 9 | "MaterialUI", 10 | "Bootstrap", 11 | "Tailwind", 12 | "Figma", 13 | "Firebase", 14 | "Photoshop", 15 | ]; 16 | 17 | // Choose your skills from below. Make sure it's in the same format and spelled correctly. 18 | 19 | // AVAILABLE SKILLS 20 | 21 | /* 22 | HTML 23 | CSS 24 | JS 25 | React 26 | Next JS 27 | Nuxt JS 28 | Node JS 29 | Vue 30 | Angular 31 | Docker 32 | Photoshop 33 | Svelte 34 | Azure 35 | Fastify 36 | Haxe 37 | Ionic 38 | Markdown 39 | Microsoft Office 40 | Picsart 41 | Sketch 42 | Unity 43 | WolframAlpha 44 | Adobe XD 45 | After Effects 46 | Bootstrap 47 | Bulma 48 | CapacitorJs 49 | Coffeescript 50 | MemSQL 51 | C 52 | C++ 53 | C# 54 | Python 55 | Java 56 | Julia 57 | Matlab 58 | Swift 59 | Ruby 60 | Kotlin 61 | Go 62 | PHP 63 | Flutter 64 | Dart 65 | Typescript 66 | Swift 67 | Git 68 | Figma 69 | Canva 70 | Ubuntu 71 | Bootstrap 72 | MongoDB 73 | Tailwind 74 | ViteJS 75 | VuetifyJS 76 | MySQL 77 | PostgreSQL 78 | AWS 79 | Firebase 80 | Blender 81 | Premiere Pro 82 | Adobe Audition 83 | Deno 84 | Django 85 | Gimp 86 | Graphql 87 | Lightroom 88 | MaterialUI 89 | Nginx 90 | Numpy 91 | OpenCV 92 | Pytorch 93 | Selenium 94 | Strapi 95 | Tensorflow 96 | Webex 97 | Wordpress 98 | */ 99 | -------------------------------------------------------------------------------- /src/data/UserData.jsx: -------------------------------------------------------------------------------- 1 | export const UserData = { 2 | name: "Rahul Vijay", 3 | about : "I'm a front end developer that learned everything on my own. I specialize in creating dynamic, accessible websites that work on any device. Furthermore, I regularly create creative solutions that improve user experiences. I am proficient in React.js, Redux, JavaScript, HTML5, and CSS. I guarantee efficient code management and communication thanks to my knowledge with Git version control. Likewise, I'm also skilled at developing apps using mini program studio frameworks and exceeding client expectations with my high-caliber solutions.", 4 | resumeUrl : "https://drive.google.com/file/d/1LSVLVmJA_3fhWtZPc_d_pHnkXhL4s-Oc/view", 5 | FooterLink : "https://www.linkedin.com/in/rahulvijay81/", 6 | socialMedia: [ 7 | { 8 | socialMediaName: "github", 9 | url: "https://github.com/rahulvijay81", 10 | icon: "AiFillGithub", 11 | }, 12 | { 13 | socialMediaName: "linkedin", 14 | url: "https://www.linkedin.com/in/rahulvijay81/", 15 | icon: "FaLinkedinIn", 16 | }, 17 | { 18 | socialMediaName: "twitter", 19 | url: "https://twitter.com/rahulvijay8156", 20 | icon: "AiOutlineTwitter", 21 | }, 22 | { 23 | socialMediaName: "instagram", 24 | url: "https://instagram.com/rahulvijay81", 25 | icon: "AiFillInstagram", 26 | }, 27 | ], 28 | typewriterOptions: { 29 | strings: [ 30 | "Front End Developer", 31 | "React Js Developer", 32 | "React Native Developer", 33 | "UI Developer", 34 | "Javascript Developer", 35 | ], 36 | autoStart: true, 37 | loop: true, 38 | deleteSpeed: 30, 39 | }, 40 | }; 41 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | 5 | ReactDOM.createRoot(document.getElementById('root')).render( 6 | 7 | 8 | , 9 | ) 10 | -------------------------------------------------------------------------------- /src/pages/About.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { UserData } from "../data/UserData"; 3 | import Marquee from "react-fast-marquee"; 4 | import { skillsData } from "../data/SkillsData"; 5 | import { skillsImage } from "../utils/SkillsImage"; 6 | import AboutImage from "../Assets/images/AboutImage.png"; 7 | 8 | function About() { 9 | const { about } = UserData; 10 | return ( 11 |
12 |
13 |
14 |

15 | About Me 16 |

17 |

{about}

18 |
19 | 27 | {skillsData.map((skill, id) => ( 28 |
32 | {skill} 37 |

{skill}

38 |
39 | ))} 40 | 41 |
42 |
43 | 44 | 49 |
50 |
51 | ); 52 | } 53 | 54 | export default About; 55 | -------------------------------------------------------------------------------- /src/pages/ArchiveProjects.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ProjectsList } from "../data/ProjectsList"; 3 | import { FaArrowLeft } from "react-icons/fa6"; 4 | import { useNavigate } from "react-router-dom"; 5 | 6 | function ArchiveProjects() { 7 | const navigate = useNavigate(); 8 | const AllProjects = ProjectsList.projects; 9 | return ( 10 |
11 |
{ 13 | navigate(-1); 14 | }} 15 | className="ml-[5%] hidden gap-2 pt-8 hover:text-white lg:flex lg:items-center " 16 | > 17 | 18 | { 21 | navigate(-1); 22 | }} 23 | > 24 | Portfolio 25 | 26 |
27 |
28 |
29 | The project I work on 30 |
31 |
32 |
33 | {AllProjects.map((project, index) => ( 34 |
38 |

39 | {project.name} 40 |

41 |

42 | {project.description} 43 |

44 |
45 | {project.technologies.map((tech, index) => ( 46 |

50 | {tech} 51 |

52 | ))} 53 |
54 |
55 | ))} 56 |
57 |
58 | ); 59 | } 60 | 61 | export default ArchiveProjects; 62 | -------------------------------------------------------------------------------- /src/pages/Contact.jsx: -------------------------------------------------------------------------------- 1 | import { UserData } from "../data/UserData"; 2 | 3 | function Contact() { 4 | const { FooterLink } = UserData; 5 | return ( 6 |
7 |
8 |

9 | Get In Touch 10 |

11 |

12 | I'd love to connect and explore exciting opportunities with you! 13 | Whether you have interesting projects, creative ideas, or just want to 14 | chat, please don't hesitate to reach out. My inbox is open 24/7! 15 |

16 | 17 | 25 |
26 |
27 | ); 28 | } 29 | 30 | export default Contact; 31 | -------------------------------------------------------------------------------- /src/pages/Home.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import TypewriterText from "../components/TypewriterText"; 3 | import { UserData } from "../data/UserData"; 4 | import { 5 | AiFillGithub, 6 | AiOutlineTwitter, 7 | AiFillInstagram, 8 | } from "react-icons/ai"; 9 | import { FaLinkedinIn } from "react-icons/fa"; 10 | import imagedeveloper from "../Assets/images/imagedeveloper.png"; 11 | 12 | function Home() { 13 | const socialMedia = UserData.socialMedia; 14 | 15 | const socialMediaIcons = { 16 | AiFillGithub: AiFillGithub, 17 | FaLinkedinIn: FaLinkedinIn, 18 | AiOutlineTwitter: AiOutlineTwitter, 19 | AiFillInstagram: AiFillInstagram, 20 | }; 21 | 22 | return ( 23 |
24 |
25 |
26 |

27 | Hello 👋 28 |

29 |

30 | Im {UserData.name} 31 |

32 | 33 | 34 |
35 | {socialMedia.map((data, index) => { 36 | const IconComponent = socialMediaIcons[data.icon]; 37 | return ( 38 | 45 | ); 46 | })} 47 |
48 |
49 | 50 |
51 | 56 |
57 |
58 |
59 | ); 60 | } 61 | 62 | export default Home; 63 | -------------------------------------------------------------------------------- /src/pages/Layout.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Header from "../components/Header"; 3 | import Home from "./Home"; 4 | import About from "./About"; 5 | import Contact from "./Contact"; 6 | import Footer from "../components/Footer"; 7 | import Project from "./Project"; 8 | import { Element } from "react-scroll"; 9 | 10 | function Layout() { 11 | return ( 12 | <> 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 |