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.
Here are the steps to run the portfolio locally.
-
Install dependencies
npm i
-
Create a Firebase project and select the web app
-
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"
-
Import json data
- Go to Firebase Console and select your project
- Go to "Database" -> "Realtime Database" -> "Import JSON" and import the [data.json] file
-
Run the project
npm run dev
-
Create a Vercel account and select "Import Project"
-
Select the forked repository and deploy
-
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
-
Hurray! You successfully deployed the portfolio🥳