Shiv's Portfolio Live - 👌 Best NextJS Portfolio

Table of content

1. Features
2. Sections
3. Tech Stacks
4. Getting Started
5. How to Edit This Portfolio (Make It Your's)
6. How to Implement a Live Chat System Using Tawk.to
7. Required APIs for This Project (All Are Free APIs)
8. .env.local - file
9. Contribute

1. Features ✅

• Simple and Clean Design
• Dark and Light Theme
• Mobile Responsiveness
• Chat System - tawk.to
• Message by gmail - nodemailer

2. Sections 🧱

1. Home | Intro | Welcome
2. Skills
3. Projects
4. Blogs
5. My Journey
6. Apps

3. Tech Stack 💻

• Next JS

• Tailwind CSS

• Libraries:

  • react-icons
  • framer-motion
  • axios
  • mongoose
  • nodemailer
  • react-responsive-carousel
  • react-responsive-masonry
  • react-syntax-highlighter

4. Getting Started ▶️

Follow these steps to set up and run the project on your local machine.

1. Clone the Repository

To get a local copy of this repository, run the following command in your terminal:

git clone https://github.com/iamshiv007/Next-Portfolio.git

2. Navigate to the Project

Change your working directory to the project folder:

cd next-portfolio

3. Install Dependencies

Install the required packages using npm:

npm i

4. Start the Project

Run the following command to launch the Next.js project in your local environment:

npm run dev

5. Access the Project

Open your web browser and go to http://localhost:3000 to view the project.

That's it! You're now ready to explore the project locally.

Happy coding! 🚀

5. How to Edit This Portfolio (Make It Your's)

Note :-This is a beginner's guide for those who have never worked on a Next.js project before. If you can understand the project, it's in your hands to make changes and create a portfolio that's 10 times better. You can use its clone for a quick start.

1. Your Name and Photo

In the root directory, you'll find a sections folder. Inside this folder, locate the Intro.jsx file.

Within the intro file, update the following details:

• Shivraj - Your Name
• Web Developer - Profession
• /images/cartoon0.png - Your Photo

Remember to have your photo uploaded in the images folder located within the public directory.

2. Skills

In the root directory, you'll find a constants folder. Inside this folder, locate the SkillsData.jsx

• Add or remove skills according to your preferences.
• Use Desire icon from react-icons library.
• Give desire color to icon.

3. Projects

Just like with Skills, we have a ProjectsData.js file located in the constants folder.

All you need to do is replace the existing data with your own (name: Your project name, url: Project Live URL, imageUrl: Image URL from the images folder in the public directory).

4. My Journey

Similar to Skills and Projects, you only need to customize the data in the JourneyData.jsx file according to yourself.

5. Apps

You don't need to change the app data, but if you want, you can create similar easy apps and replace the data in the AppsData.jsx file.

Suggetion for apps :- To-do List App, Weather App, Random Quote Generator, Random Jokes Generator, Basic Calculator, Countdown Timer, Recipe Finder etc.

Note :- If you're not able to customize the portfolio or run the project in your local environment, don't worry. It's not a journey of just 1 or 2 days, it takes time. For me, I was able to create it after 1 year of consistent learning. If you're not able to use its clone, just leave it and keep learning. You'll create a better portfolio or project one day.

⭐️ If You want to show your appreciation, please give this repository a star.

6. How to Implement a Live Chat System Using Tawk.to

I'm excited to introduce you to this amazing feature, and the best part is, it's completely free!

Follow these steps to set up your live chat system:

Step 1: Sign up on tawk.to.

Step 2: Complete the simple 4-step process to create your free account.

Step 3: Once you've completed the process, copy the code snippet provided at the end.

Step 4: Now, integrate the copied code into your application:

Navigate to the Components directory, locate the ChatSystem.jsx file, and inside the useEffect function, paste the copied code.

By following these steps, you'll have an efficient live chat system up and running in no time, enhancing your user experience and engagement.

7. Required APIs for This Project (All Are Free APIs)

1. ChatGPT API from RapidAPI - Details

2. Microsoft Translator API from RapidAPI - Details

3. Google News API from Google - Details

4. Quiz API from Trivia API (No API Key Required) - Details

5. Images API from Pexels API - Details

8. .env.local - file

After obtaining the above mentioned API, create a .env.local file and put values and restart your project.

const RAPID_API_KEY = VALUE_XXXX
const GOOGLE_NEWS_API_KEY = VALUE_XXXX
const PEXELS_API_KEY = VALUE_XXXX
const MONGODB_CONNECTION_STRING = VALUE_XXXX

9. Contribute 🎁

Thank you for checking out my portfolio! I invite you to join in and make it your own. Feel free to contribute by editing the information, images, and name to personalize it according to your skills and achievements.

How to Contribute:

1. Fork the Repository: Start by forking this repository to your GitHub account. This will create a copy of the portfolio project in your account.

2. Make Your Changes: Edit the portfolio content, update images, and customize details like your name, skills, projects, and journey.

3. Preview Your Portfolio: You can locally preview your changes by following the setup instructions mentioned in the repository's README.

4. Create a Pull Request: Once you're satisfied with your changes, submit a pull request back to the original repository. I'll review your contributions and, if everything looks good, merge your changes.

Why Contribute:

• Showcase Your Work: Share your accomplishments and projects with the world through your personalized portfolio.
• Learn and Improve: Practice your coding skills while experimenting with HTML, CSS, and JavaScript.
• Join the Community: Connect with others who are also building their portfolios, and receive feedback and support.

Remember, your portfolio is a reflection of your unique skills and experiences. Personalize it to make it truly yours!

Happy coding and designing! 🚀🎨