· Next Portfolio built in Next.js + TypeScript + Tailwind CSS + Firebase ·

Introduction • Tech Stack • Development • Deployment • License

Introduction 👋

Next Portfolio is built using Next.js and Tailwind CSS for a modern design and rapid development. TypeScript is utilized for code clarity and safety. Additionally, Firebase is being integrated for backend services such as realtime-database. The result is a dynamic and functional portfolio website that showcases the developer's skills and experience.

Tech Stack 🛠️

• Next.js
• TypeScript
• Tailwind CSS
• Firebase
• SendGrid
• Framer Motion

Development 💻

Here are the steps to run the 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 i

4. Create a Firebase project and select the web app

5. Create an .env.local file in the root directory, and add the following variables with your firebase config:

   SENDGRID_API_KEY=XXXXXXXX
   NEXT_PUBLIC_FIREBASE_DATABASE_URL=XXXXXXXXXX
   MAIL_FROM=YOUR_MAIL_ID
   MAIL_TO=YOUR_MAIL_ID
   

Note: SENDGRID_API_KEY - Create an API key from "Settings" -> "API Keys" with "Restricted Access" to only "Mail Send"

1. Update the sample data.json provided, with your data or directly import the same and edit using firebase later. (For storing images you can use Cloudinary or Firebase Storage)

2. Import json data

   • Go to Firebase Console and select your project
   • Go to "Database" -> "Realtime Database" -> "Import JSON" and import the data.json file

3. Run the project

   npm run dev

Deployment 🚀

1. Create a Vercel account and select "Import Project"

2. Select the forked repository and deploy

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. Hurray! You successfully deployed the portfolio🥳

License 📄

This project is licensed under the MIT License - see the LICENSE.md