🚀 My Developer Portfolio is Live! | Built with Next.js, Tailwind & Framer Motion

Amarjeet Kumar — Mon, 07 Jul 2025 16:38:06 +0000

🚀 Amarjeet Kumar – Developer Portfolio

Welcome to the official GitHub repository of my personal developer portfolio – a sleek, modern, and fully responsive website built using Next.js, TailwindCSS, and other top-notch technologies. It showcases my projects, skills, certifications, and more.

🌐 Live Site: amarjeetkumar

📁 Source Code: GitHub Repository

Demo 🎥

https://github.com/user-attachments/assets/af627c44-c11e-453c-b00d-705909d35884

View live preview here.

Table of Contents 📜

Sections
Demo
Installation
Getting Started
Usage
Deployment
Tutorials
- Gmail App Password Setup
- Create a Telegram Bot
- Fetching Blog from dev.to
Packages Used

Sections 🔖

HERO SECTION
ABOUT ME
EXPERIENCE
SKILLS
PROJECTS
EDUCATION
BLOG
CONTACTS

Installation ⬇️

You will need to download Git and Node to run this project

Git
Node

Make sure you have the latest version of both Git and Node on your computer.

bash
node --version
git --version

Getting Started 🎯

Fork and Clone the repo

To Fork the repo click on the fork button at the top right of the page. Once the repo is forked open your terminal and perform the following commands

bash
git clone https://github.com//Personal-Portfolio-Website.git

cd Personal-Portfolio-Website

Install packages from the root directory

bash
npm install

or

yarn install

Then, run the development server:

bash
npm run dev

or

yarn dev

Open http://localhost:3000 with your browser to see the result.

Running with Docker Compose

Build Docker Image and Run Container:

bash
docker-compose up --build

Access the Application: Visit http://localhost:3000 in your web browser to view the running application.

Building the Docker Image

Build the Docker Image using Dockerfile.dev:

bash
docker build -t nextjs-app -f Dockerfile.dev .

Running the Docker Container:

bash
docker run -p 3000:3000 nextjs-app

Access the Application: Visit http://localhost:3000 in your web browser to view the running application.

Usage 🕹️

Please create a new .env file from .env.example file.

Eg:

env
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:

javascript
export const personalData = {
name: "Amarjeet Kumar",
profile: "/profile.png",
designation: "Software Developer | ML Enthusiast",
description: "Passionate about building scalable software and contributing to open source.",
email: "ak7462514@gmail.com",
phone: "+91-9798447398",
address: "Mohali, Punjab, India",
github: "https://github.com/AmarjeetJyotis",
linkedIn: "https://www.linkedin.com/in/amarjeet-jyotish/",
leetcode: "https://leetcode.com/u/AmarjeetJyotish/",
devUsername: "AmarjeetJyotis",
resume: "https://drive.google.com/file/d/1XJjlWq6_fE5E8ra58KoQbukHk7IVzwc8/view",
};

devUsername is used for fetching blog posts from dev.to.

Deployment 🚀

Deploying the app to platforms like Vercel or Netlify is quick and easy.

Deploying to Vercel:

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 .env file.
- E.g., NEXT_PUBLIC_GTM, NEXT_PUBLIC_APP_URL, TELEGRAM_BOT_TOKEN, etc.
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!

Updating After Deployment

Whenever you push changes to your GitHub repo, Vercel will automatically redeploy the app, keeping your portfolio up-to-date.

Deploying to Netlify:

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 .env file.
Click Deploy Site. Netlify will build and deploy your portfolio.

📂 Project:

🎲 AI Rubik’s Cube Solver
Computer vision-based solver using OpenCV and Kociemba algorithm.

🫁 Pneumonia Detection (CNN)
Hybrid CNN + Random Forest model, presented at ICICC-2025 (Springer).

🛣️ Alternative Road Routes
Simulated traffic-aware pathfinding using Dijkstra in C++/OpenGL.

🛒 Ecomzy – React E-Commerce App
React + Redux Toolkit-based shopping site with dynamic product APIs.

🎓 Certifications
IBM DevOps & Software Engineering

Google Cloud Solutions Architect

Google Cybersecurity Certificate

NPTEL IoT (IIT Kharagpur)

Google UX Design

Microsoft Power BI Analyst

📄 View Certificates

🧰 Technical Skills
Languages: C++, Python, Java, SQL, JS, PHP
Frameworks: React, Redux, Next.js, OAuth, JWT
Databases: MySQL, PostgreSQL
Cloud: AWS
Tools: Docker, Jenkins, GitHub, Selenium, Postman
Soft Skills: Leadership, Teamwork, Communication

🧑‍💻 Author

Amarjeet Kumar

UID: 21BCS10768

Department of Computer Science & Engineering

Chandigarh University

Portfolio: https://amarjeett.vercel.app/

LinkTree: https://linktr.ee/AmarjeetKumarJyotish

GitHub: https://github.com/AmarjeetJyotis

LinkedIn: https://www.linkedin.com/in/amarjeet-jyotish/

GeeksforGeeks: https://www.geeksforgeeks.org/user/amarjeetjyotish/

LeetCode: https://leetcode.com/u/AmarjeetJyotish/

Gmail App Password Setup

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).

Create a Telegram Bot

Open Telegram and search for the user @botfather.
Start a chat with BotFather and use the /newbot command 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_TOKEN with your actual bot token: https://api.telegram.org/bot/getUpdates
- Look for the chat object in the response, which contains your chat ID (you can use this value for TELEGRAM_CHAT_ID).

Fetching Blog from dev.to

To display your blog posts from dev.to on the portfolio:

Set your devUsername in the utils/data.js file 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.

Packages Used 📦

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

FAQ:

For those facing the issue of "next is not recognized as an internal or external command, operable program or batch file."

Run the following command:

bash

npm install -g next

This installs Next.js globally

then do the usual npm run dev

Razorpay-Clone

Amarjeet Kumar — Thu, 26 Jun 2025 23:24:57 +0000

Razorpay-Clone

🔗 Live Demo: https://lec-11-razorpay-clone-62tf.vercel.app/

🚀 Overview
Razorpay-Clone is a front-end implementation of Razorpay's powerful payment and business banking suite, designed to replicate key UI and functional elements of the official Razorpay site. This project simulates a real-world Razorpay integration for learning and demonstration purposes.

🔧 Features
💳 Accept Payments with Razorpay Suite
Payment Gateway – 100+ payment methods supported

Payment Links – Share via email, SMS, or chatbot

Payment Pages – Hosted payment pages, no coding required

Payment Buttons – One-time/recurring payment buttons

Subscriptions – Recurring billing with UPI, cards, etc.

Smart Collect – Virtual accounts & UPI-IDs for reconciliation

Route – Split payments between vendor accounts

💼 Automate Finances with RazorpayX
Current Accounts – Fully digital, tech-enabled

Payroll – 3-click salary payments & compliance

Corporate Cards – Manage team & recurring expenses

Payouts – Disburse to banks, wallets, UPI

Capital & Credit – Working capital loans, settlements

🛠️ Developer Friendly
Instant Activation – Start in under 2 minutes

API Driven – Full REST API access

Easy Integration – SDKs & plugins for major platforms

Dashboard Reporting – Real-time insights

Secure – PCI DSS Level 1 compliant

📁 Project Structure
lua
Copy
Edit
lec-11---Razorpay-Clone/
├── index.html
├── style.css
├── tailwind.config.js
├── postcss.config.js
├── package.json
├── package-lock.json
└── README.md
💡 Use Cases
E-commerce payment integration

Subscription billing for SaaS

Automated payroll system for startups

Vendor payout management for marketplaces

Business banking dashboard simulation

📦 Tech Stack
HTML + Tailwind CSS – UI development

Hosted on Vercel – Easy deployment

Razorpay API Reference – (mock/simulated)

📬 Want to Learn More?
🔗 Razorpay Official Documentation
📖 API Integration Guides
📨 Support: support@razorpay.com

🧑‍💻 Author
👨‍💻 AmarjeetJyotis
🔗 GitHub Repo: AmarjeetJyotis/lec-11---Razorpay-Clone

📄 License
This project is for educational and demonstration purposes only.
All Razorpay trademarks and branding belong to Razorpay Software Pvt Ltd.

Let me know if you'd like this converted to a README.md as well or want help styling the DEV post further.

DEV Community: Amarjeet Kumar

🚀 My Developer Portfolio is Live! | Built with Next.js, Tailwind & Framer Motion

Demo 🎥

View live preview here.

Table of Contents 📜

Sections 🔖

Installation ⬇️

You will need to download Git and Node to run this project

Make sure you have the latest version of both Git and Node on your computer.

Getting Started 🎯

Fork and Clone the repo

Install packages from the root directory

or

or

Running with Docker Compose

Building the Docker Image

Usage 🕹️

Then, Customize data in the utils/data folder.

Deployment 🚀

Deploying to Vercel:

Updating After Deployment

Deploying to Netlify:

📂 Project:

🧑‍💻 Author

Gmail App Password Setup

Create a Telegram Bot

Fetching Blog from dev.to

Packages Used 📦

FAQ:

Razorpay-Clone