npm install
# or
yarn installThen, run the development server:
npm run dev
# or
yarn devOpen http://localhost:3000 with your browser to see the result.
Please create a new .env file from .env.example file.
Eg:
NEXT_PUBLIC_GTM = NEXT_PUBLIC_APP_URL = TELEGRAM_BOT_TOKEN = TELEGRAM_CHAT_ID = GMAIL_PASSKEY = EMAIL_ADDRESS =
Then, Customize data in the utils/data folder.
Eg:
export const personalData = { name: "GatorDevs Agency", profile: "/profile.png", designation: "Full-Stack Software Developer", description: "My name is GatorDevs Agency....", email: "abumdev0110@gmail.com", phone: "+8801608797655", address: "", github: "https://github.com/mdev0110", facebook: "https://www.facebook.com/abusaid.riyaz/", linkedIn: "https://www.linkedin.com/in/abu-said-bd/", twitter: "https://twitter.com/mdev0110", stackOverflow: "https://stackoverflow.com/users/16840768/abu-said", leetcode: "https://leetcode.com/said3812/", devUsername: "mdev0110", resume: "...", };
devUsername is used for fetching blog posts from dev.to.
Deploying the app to platforms like Vercel or Netlify is quick and easy.
- Sign up or log in to Vercel.
- Once logged in, click on "New Project".
- Select your GitHub repo (the one that contains your forked project) and click Import.
- Configure your environment variables in the Vercel dashboard by adding each key from your
.envfile.- E.g.,
NEXT_PUBLIC_GTM,NEXT_PUBLIC_APP_URL,TELEGRAM_BOT_TOKEN, etc.
- E.g.,
- Click on Deploy. Vercel will automatically detect your Next.js app and build it.
- Once the deployment is complete, you can visit your live website!
Whenever you push changes to your GitHub repo, Vercel will automatically redeploy the app, keeping your portfolio up-to-date.
- Sign up or log in to Netlify.
- In the Netlify Dashboard, click "New site from Git".
- Connect your GitHub account and select your repo.
- Configure your environment variables by going to Site Settings > Build & Deploy > Environment and adding keys from your
.envfile. - Click Deploy Site. Netlify will build and deploy your portfolio.
- Log in to your Google Account at https://myaccount.google.com/.
- Navigate to Security from the left sidebar.
- Scroll down to the "Signing in to Google" section and make sure 2-Step Verification is turned ON.
- Once 2-Step Verification is enabled, you'll see an option for App Passwords.
- Click on App Passwords. You may need to enter your Google account password again.
- In the Select app dropdown, choose "Mail", and for Select device, choose "Other (Custom name)" and name it appropriately (e.g., "Portfolio").
- Click Generate. A 16-character app password will be displayed. Save this password for later use in your environment variables (e.g.,
GMAIL_PASSKEY).
- Open Telegram and search for the user @BotFather.
- Start a chat with BotFather and use the
/newbotcommand to create a new bot. - Choose a name for your bot.
- Set a unique username for your bot (must end with
bot, e.g.,PortfolioAssistantBot). - Once your bot is created, BotFather will send you a Token. Save this token, as you will need it for your environment variables (e.g.,
TELEGRAM_BOT_TOKEN). - To get your chat ID:
- Open your bot in Telegram and send it a message.
- Visit the following URL in your browser, replacing
BOT_TOKENwith your actual bot token:
https://api.telegram.org/bot<BOT_TOKEN>/getUpdates - Look for the
chatobject in the response, which contains your chat ID (you can use this value forTELEGRAM_CHAT_ID).
To display your blog posts from dev.to on the portfolio:
- Set your
devUsernamein theutils/data.jsfile to your dev.to username. - The application will automatically fetch your latest blog posts and display them in the BLOG section.
- Ensure your blogs are publicly visible on dev.to, and the application will fetch them using the dev.to API.
| Used Package List |
|---|
| @emailjs/browser |
| @next/third-parties |
| axios |
| lottie-react |
| next |
| nodemailer |
| react |
| react-dom |
| react-fast-marquee |
| react-google-recaptcha |
| react-icons |
| react-toastify |
| sharp |
| sass |
| tailwindcss |