GitHub - param20h/param20h.github.io: Modern Portfolio built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion - showcasing my journey as a Python Developer specializing in AI, Machine Learning, and Web3 technologies.

Modern Portfolio built with Next.js 14, TypeScript, Tailwind CSS, and Framer Motion - showcasing my journey as a Python Developer specializing in AI, Machine Learning, and Web3 technologies.

🔄 Auto-updating! GitHub stats refresh daily via GitHub Actions - always showing fresh data!

👨‍💻 About Me

Paramjit Singh | Computer Science Student at LPU (Lovely Professional University)

🐍 Python Specialist - AI/ML & Backend Development
⚛️ Full-Stack Developer - React, Next.js, Node.js
🤖 AI Enthusiast - Machine Learning & TensorFlow
🎮 Game Developer - Unity & Pygame
🔗 Web3 Explorer - Blockchain & Smart Contract

🛠️ Tech Stack

Frontend

React • Next.js • TypeScript • Tailwind CSS • Framer Motion • HTML5 • CSS3

Backend & Languages

Python • JavaScript • Node.js • C++ • Java

AI/ML

TensorFlow • Machine Learning • Data Analysis • Neural Networks

Game Development

Unity • Pygame • Game Design

Tools & Platforms

Git • GitHub • VS Code • Vercel • Docker

⚡ Quick Start

Prerequisites

Node.js 18+ installed
npm or yarn package manager

Installation

# Clone repository
git clone https://github.com/param20h/param20h.github.io.git
cd param20h.github.io
# Install dependencies
npm install
# Start development server
npm run dev

Open http://localhost:3000 to view it in your browser 🎉

Build for Production

# Create optimized production build
npm run build
# Preview production build
npm run start

📁 Project Structure

portfolio/
├── app/
│ ├── layout.tsx # Root layout + SEO metadata
│ ├── page.tsx # Main page composition
│ └── globals.css # Global styles with Tailwind
│
├── components/
│ ├── sections/ # Page sections
│ │ ├── Hero.tsx # Hero section with animated intro
│ │ ├── About.tsx # About section with stats
│ │ ├── Skills.tsx # Skills grid with icons
│ │ ├── Projects.tsx # Featured projects
│ │ ├── GitHubStats.tsx # Live GitHub statistics
│ │ └── Contact.tsx # Contact form with EmailJS
│ │
│ ├── ui/ # Reusable UI components
│ │ ├── Button.tsx
│ │ ├── Card.tsx
│ │ └── Section.tsx
│ │
│ ├── Navigation.tsx # Navigation bar
│ ├── Footer.tsx # Footer with social links
│ └── BackgroundEffects.tsx # Animated background
│
├── lib/
│ └── utils.ts # Utility functions
│
├── types/
│ └── index.ts # TypeScript type definitions
│
├── public/
│ └── media/ # Images, resume, assets
│
├── next.config.cjs # Next.js configuration
├── tailwind.config.ts # Tailwind theme customization
└── tsconfig.json # TypeScript configuration

🌟 Features

✨ Modern Stack

⚡ Next.js 14 - App Router with Server Components
📘 TypeScript - Full type safety
🎨 Tailwind CSS - Utility-first styling
✨ Framer Motion - Smooth animations
🎯 Font Awesome - Professional icons
📱 Fully Responsive - Mobile-first design

🚀 Performance

⚡ Static site generation
🖼️ Image optimization
🎯 Code splitting
📦 Bundle optimization
🔍 SEO optimized

🎨 UI/UX

🌈 Gradient effects
✨ Scroll animations
🎭 Hover interactions
💫 Background particles
📱 Mobile navigation

📊 Integrations

📧 EmailJS contact form
📊 Live GitHub stats
🌐 GitHub contribution graphs
🔗 Social media links

🎯 Customization Guide

1. Update Personal Information

Edit Hero Section (components/sections/Hero.tsx):

constroles=["Python Developer","AI Enthusiast",// Add your roles...];

Edit About Section (components/sections/About.tsx):

conststats=[{label: "Years Experience",value: "2+"},// Update your stats...];

2. Add Your Projects

Edit components/sections/Projects.tsx:

constprojects: Project[]=[{title: "Your Project Name",description: "Project description...",image: "/media/project-image.png",tech: ["React","Node.js","MongoDB"],liveUrl: "https://your-project.com",githubUrl: "https://github.com/username/repo",status: "live",// or "coming-soon"},// Add more projects...];

3. Update Skills

Edit components/sections/Skills.tsx:

constskills=[{name: "Python",icon: faPython,color: "#3776AB"},{name: "React",icon: faReact,color: "#61DAFB"},// Add your skills...];

4. Customize Theme Colors

Edit tailwind.config.ts:

colors: {primary: {500: '#00d4ff',// Your primary brand color},accent: {500: '#ff6b6b',// Your accent color},}

5. Setup Contact Form (EmailJS)

Create account at EmailJS
Get your credentials (Service ID, Template ID, Public Key)
Create .env.local file:

NEXT_PUBLIC_EMAILJS_SERVICE_ID=service_xxxxxxxNEXT_PUBLIC_EMAILJS_TEMPLATE_ID=template_xxxxxxxNEXT_PUBLIC_EMAILJS_PUBLIC_KEY=your_public_key_here

Restart dev server: npm run dev

EmailJS Template Example:

Subject: New Contact from {{from_name}}
Name: {{from_name}}
Email: {{from_email}}
Message: {{message}}

🌐 Deployment

Deploy to Vercel (Recommended)

# Install Vercel CLI
npm i -g vercel
# Deploy
vercel

Deploy to GitHub Pages

Update next.config.cjs if needed
Build: npm run build
Deploy the out/ folder

Automated with GitHub Actions:

Push to main branch
GitHub Actions automatically builds and deploys
Check .github/workflows/deploy.yml

Deploy to Netlify

npm run build
# Drag 'out' folder to Netlify

🧪 Development

Available Scripts

npm run dev # Start development server (localhost:3000)
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint

Testing

Test locally:

npm run dev
# Open http://localhost:3000

Test production build:

npm run build
npm run start

Test on mobile:

Get your local IP: ipconfig
On phone: http://YOUR_IP:3000

🔄 Automatic Daily Updates

Your portfolio automatically fetches fresh GitHub stats daily!

How It Works

🤖 GitHub Actions rebuilds site daily at midnight UTC
📊 Fetches live data from GitHub API
🚀 Deploys updated site automatically
⚡ Zero maintenance required

What Updates Daily

Total repositories count
Total stars & forks
Follower count
Contribution graphs
Recent activity

Manual Update

Want fresh data now?

Go to Actions
Click "Deploy Next.js to GitHub Pages"
Click "Run workflow"

Increase Rate Limits

Add GitHub token for 5,000 requests/hour (vs 60/hour):

Create token: https://github.com/settings/tokens (public_repo scope)
Add secret: Repository Settings → Secrets
Name: NEXT_PUBLIC_GITHUB_TOKEN
Value: Your token

📖 Full details: See AUTO-UPDATE.md

🐛 Troubleshooting

Images not loading?

Ensure images are in public/media/
Use paths like /media/image.png (with leading /)

Build failing?

Remove-Item-Recurse -Force node_modules, .next
npm install
npm run build

Port 3000 already in use?

# Use different port
npm run dev ---p 3001

EmailJS not working?

Check .env.local has correct credentials
Restart dev server after changing .env.local
Check browser console for errors
Verify EmailJS template variables

GitHub stats showing 0?

Check browser console for API errors
GitHub API rate limit (60 requests/hour without auth)
Test page available at /test-github-api.html

📚 Technologies Used

Technology	Version	Purpose
Next.js	14.2.0	React framework
React	18	UI library
TypeScript	5	Type safety
Tailwind CSS	3.4	Styling
Framer Motion	11	Animations
Font Awesome	6	Icons
EmailJS	4.4.1	Contact form
Lucide React	0.344.0	Additional icons

🌟 Featured Projects

🧠 AI Financial Identification System

Machine Learning system for the Indian Department of Posts using Python, TensorFlow, and Data Analysis.

Tech: Python • Machine Learning • TensorFlow • Data Science
Status: In Development

🚀 Python Space Invaders Game

Classic arcade game built with Pygame featuring OOP, collision detection, and progressive difficulty.

Tech: Python • Pygame • OOP • Game Development
Status: Completed
Live:Play Now

📊 GitHub Stats

📞 Connect With Me

Portfolio:param20h.github.io

☕ Support My Work

If you find this project helpful or inspiring, consider supporting me!

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Built with Next.js
Styled with Tailwind CSS
Animated with Framer Motion
Icons from Font Awesome and Lucide
GitHub stats from GitHub Readme Stats

⭐ Star this repository if you found it helpful!

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
app		app
components		components
data		data
lib		lib
node_modules		node_modules
public		public
types		types
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
CNAME		CNAME
README.md		README.md
create-export.js		create-export.js
next.config.cjs		next.config.cjs
package-lock.json		package-lock.json
package.json		package.json
postcss.config.cjs		postcss.config.cjs
robots.txt		robots.txt
setup-emailjs.ps1		setup-emailjs.ps1
setup-github-token.ps1		setup-github-token.ps1
setup.ps1		setup.ps1
sitemap.xml		sitemap.xml
tailwind.config.ts		tailwind.config.ts
tsconfig.json		tsconfig.json

Latest commit

History

Folders and files

Repository files navigation