In today’s digital age, having a professional online portfolio is crucial for showcasing your skills and experience. This guide will take you through building a portfolio website using Next.js, TypeScript, Tailwind CSS, and Firebase. Let’s embark on this journey of creativity and functionality!

Introduction

Next Portfolio is built with modern technologies that ensure rapid development and a stunning design. Utilizing TypeScript adds an extra layer of clarity and safety to your code, while Firebase provides essential backend services, such as a real-time database. The result? A dynamic portfolio that perfectly showcases your skills.

Tech Stack

• Next.js – A powerful React framework
• TypeScript – JavaScript with type safety
• Tailwind CSS – A utility-first CSS framework
• Firebase – Backend as a Service (BaaS)
• SendGrid – Email delivery service
• Framer Motion – Animation library for React

Development

Follow these steps to set up your portfolio locally:

1. Fork this repository.
2. Clone your forked copy of the repo:

git clone https://github.com/your-github-username/next-portfolio.git

3. Install dependencies:

npm install

4. Create a Firebase project and choose the web app option.
5. Create an .env.local file in the root directory with the following variables:
• SENDGRID_API_KEY=XXXXXXXX
• NEXT_PUBLIC_FIREBASE_DATABASE_URL=XXXXXXXXXX
• MAIL_FROM=YOUR_MAIL_ID
• MAIL_TO=YOUR_MAIL_ID

Note: To obtain your SendGrid API key, go to Settings > API Keys in your SendGrid dashboard and create one with restricted access only for Mail Send.

6. Update the sample data.json provided, with your information or directly import it into Firebase and edit later. (For storing images, you may use Cloudinary or Firebase Storage).
7. Import JSON data:
1. Navigate to your Firebase Console and select your project.
2. Go to Database > Realtime Database > Import JSON and upload the data.json file.
8. Run the project:

npm run dev

Deployment

1. Create a Vercel account and select Import Project.
2. Choose your forked repository and deploy it.
3. Add the following environment variables in the Vercel dashboard:
• SENDGRID_API_KEY=XXXXXXXX
• NEXT_PUBLIC_FIREBASE_DATABASE_URL=XXXXXXXXXX
• MAIL_FROM=YOUR_MAIL_ID
• MAIL_TO=YOUR_MAIL_ID
4. Congratulations! You have successfully deployed your portfolio.

License

This project is licensed under the MIT License. Check the LICENSE.md file for more details.

Troubleshooting

While setting up your portfolio, you might encounter a few hiccups along the way. Here are some troubleshooting steps:

• Unable to deploy on Vercel: Make sure all environment variables are correctly set in your Vercel dashboard.
• API key issues: Double-check that your API keys are active in your respective platforms (Firebase, SendGrid).
• Local server not running: Ensure that you have installed all dependencies with npm install successfully.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.