Welcome to my personal portfolio website repository! This project serves as the codebase for my online portfolio showcasing my skills projects and experiences. Feel free to explore the code and use it as a reference for your own portfolio or provide feedback to help me improve.
1. Clone the repository
git clone https://github.com/Saravanakumar2003/Portfolio.git
2. Navigate to the project directory
cd Portfolio
3. Install dependencies
npm install
4. Start the development server
npm run dev
5. Visit http://localhost:3000 to see the portfolio in action.
http://localhost:3000
-
Next.js: A React framework that enables server-side rendering and efficient web development.
-
React.js: A JavaScript library for building user interfaces, providing a modular and reusable component-based structure.
-
TypeScript: A typed superset of JavaScript, enhancing code maintainability and catching errors during development.
-
GitHub: Integration with GitHub allows dynamic fetching and display of GitHub-related data, such as followers, following, total stars and contributions.
-
EmailJS: Integration with EmailJS facilitates sending emails directly from the portfolio website. API keys and setup instructions can be obtained from the EmailJS website.
-
Hashnode Blog: Integration with Hashnode for blogging features, connecting the portfolio to a Hashnode blog. Configure the integration through Hashnode's documentation.
-
Instagram Widget: Embedding an Instagram widget to display recent posts. Obtain the required code or API key from the Behold.so.
-
Canva Iframe: Integrating Canva through an iframe allows showcasing designs and graphics. To embed Canva content, obtain the embed code from the Canva platform.
-
Calendly Iframe: Embedding Calendly through an iframe enables users to schedule appointments. To include a Calendly scheduling widget, get the embed code from the Calendly website.
-
Analytics: Analytics for this personal portfolio are managed using Vercel and Google Analytics to gather insights into visitor behaviour and engagement.
-
Testimonials.to: Integration with Testimonials.to allows displaying testimonials from clients and users. Obtain the required code from the Testimonials.to platform.
-
Visme Feedback Form: A feedback form powered by Visme is included in the portfolio for collecting user feedback and suggestions.
-
AI Chatbot: An AI chatbot is integrated into the portfolio to provide interactive communication and assistance.
- Sign up for an account on EmailJS.
- Create an email template and obtain the Service ID, Template ID and Public Access Code.
- Use these credentials in your portfolio code for EmailJS integration.
- Create a developer account on behold.so.
- Set up a widget and obtain an Access Token for Instagram.
- Use the Access Token in your portfolio code for Instagram integration.
- Create or log in to your Canva account.
- Design your content, then click on the "Share" button.
- Copy the provided embed code.
- Use the embed code in your portfolio to showcase Canva designs.
- Sign up or log in to Calendly.
- Create a new event or appointment type.
- Copy the provided embed code.
- Use the embed code in your portfolio to embed the Calendly scheduling widget.
- Create a Github Account and copy your username.
- To integrate GitHub just your Username is enough.
- Use the Username in your portfolio to showcase your Github Contribution.
- Sign in to your Google Analytics account or create a new one.
- Create a new property for your portfolio website.
- Obtain the tracking code provided by Google Analytics.
- Insert the tracking code into your website. In a Next.js project, this is often done in the
<Head>section of the layout or using a dedicated library.
- Create an account on Testimonials.to.
- Add testimonials and obtain the provided code.
- Use the code in your portfolio to display testimonials.
- Customize the appearance and layout of the testimonials as needed.
- Testimonials.to provides a simple and effective way to showcase client feedback and reviews.
This personal portfolio is deployed using Vercel, providing a seamless and scalable hosting solution. Below are details on how the deployment is managed.
The project is deployed on Vercel, a cloud platform that offers a straightforward and efficient deployment process.
The deployment is set up for automatic deployment on Vercel. Any changes pushed to the main branch trigger a new deployment, ensuring that the live version is always up-to-date.
Ensure to set up the necessary environment variables on the Vercel platform for your portfolio. Key environment variables, such as API keys or configuration settings, can be securely stored and managed in the Vercel dashboard.
To set up environment variables in Vercel:
- Navigate to your Vercel project dashboard.
- Go to the "Settings" tab.
- Find the "Environment Variables" section.
- Add the required variables.
Vercel provides built-in analytics to monitor deployments and performance metrics. You can use the Vercel dashboard to track deployment history and identify potential issues.
If you'd like to contribute to the project, follow these steps:
- Fork the repository.
- Create a new branch:
git checkout -b feature/new-feature - Make your changes and commit them:
git commit -m 'Add new feature' - Push to the branch:
git push origin feature/new-feature - Submit a pull request.
This project is licensed under the MIT License, allowing for open collaboration and sharing. haring.
Thank you for exploring my personal portfolio project! If you find it interesting or helpful, consider showing your support by following, forking, and starring this repository.
- Follow: Stay updated with the latest developments and projects by following me on GitHub.
- Fork: Contribute to the project by forking it. Feel free to make your own modifications and enhancements.
- Star: If you find this project useful or inspiring, show your appreciation by starring it.
Your support encourages continuous improvement and fuels the motivation to create more exciting projects!
The initial design and code structure for this portfolio project were inspired by the Evander Inacio Portfolio repository. Special thanks to Evander Inacio for providing a foundation for this project.
Later all the above modifications and enhancements were made to personalize the portfolio and add new features. The project continues to evolve with additional sections, integrations, and improvements.
👤 Saravanakumar
- GitHub: @Saravanakumar2003
- Portfolio: saravana.vercel.app
- LinkedIn: Saravanakumar