🎓 Professor Portfolio

Professional Academic Portfolio Platform

Empowering Educators Through Technology & Innovation

🚀 Live Demo • 📖 Documentation • 🎨 Showcase • 💡 Get Started

Showcase Your Academic Excellence with Style

A modern, blazingly fast, and SEO-optimized portfolio platform designed specifically for educators, researchers, and academic professionals.

✨ Why Professor Portfolio?

🎯 For Educators

Showcase teaching philosophy & courses
Share educational resources
Display student testimonials
Professional online presence

🔬 For Researchers

Highlight research projects
Feature publications & papers
Present lab members & collaborations
Track academic achievements

🚀 Quick Start

Get your academic portfolio running in under 3 minutes:

# 📦 Clone the repository
git clone https://github.com/karthi-AI-hub/Professor-Portfolio.git
cd Professor-Portfolio

# 📦 Install dependencies
npm install

# 🔥 Start development server
npm run dev

# 🌐 Open browser → http://localhost:5173

🏗️ Build for Production

# 🎨 Create optimized production build
npm run build

# 👀 Preview production build locally
npm run preview

📁 Project Structure

src/
├── components/          # All React components
│   ├── SEO.tsx         # SEO meta tags and helmet
│   ├── Header.tsx      # Navigation header
│   ├── Hero.tsx        # Hero section with profile
│   ├── About.tsx       # Biography and education
│   ├── Research.tsx    # Research interests and projects
│   ├── Publications.tsx # Academic publications
│   ├── Teaching.tsx    # Courses and teaching philosophy
│   ├── Contact.tsx     # Contact information
│   └── Footer.tsx      # Footer section
├── data/
│   └── profile.json    # ALL site content (edit this!)
├── pages/
│   └── Index.tsx       # Main page layout
└── index.css           # Design system and styles

public/
└── profile-photo.jpg   # Profile photo

🎨 Customization Guide

1️⃣ Update Your Content (No Coding Required!)

All content is managed through JSON files in the src/data/ folder:

📁 src/data/
  ├── 📄 profile.json      // Personal info, education, research
  ├── 📄 content.json      // General content and statistics
  ├── 📄 classroom.json    // Course information
  ├── 📄 brainpop.json     // Quiz data
  ├── 📄 techiebites.json  // Article data
  └── 📄 timepass.json     // Puzzle data

Just edit these JSON files - no coding knowledge needed!

📝 Example: Update Personal Information

{
  "personalInfo": {
    "name": "Your Name",
    "title": "Your Title",
    "institution": "Your Institution",
    "email": "your.email@institution.edu",
    "photo": "/profile-photo.jpg"
  }
}

2️⃣ Change Profile Photo

# Replace the image in public folder
public/profile-photo.jpg

# Recommended specs:
# - Format: JPG or PNG
# - Size: 512x512px minimum
# - Aspect Ratio: Square (1:1)
# - File size: < 500KB

3️⃣ Customize Colors & Branding

Edit src/index.css to match your brand:

:root {
  --primary: 220 90% 56%;        /* Main brand color */
  --secondary: 210 40% 96.1%;    /* Secondary color */
  --accent: 280 70% 60%;         /* Accent highlights */
}

Pro Tip: Use Tailwind Color Palette for inspiration!

4️⃣ Add Your Logo

# Replace logo in public folder
public/logo.png

# Logo appears in:
# - Header navigation
# - Browser tab (favicon)
# - Social media shares

� Features

Feature	Description
📱 Fully Responsive	Mobile-first design that adapts perfectly to any screen size
🔍 SEO Optimized	Complete meta tags, Open Graph, Twitter cards, and structured data
✨ Smooth Animations	Buttery smooth transitions powered by Framer Motion
🎨 Modern Design	Clean, professional aesthetic tailored for academics
⚡ Blazing Fast	Built with Vite for lightning-fast load times (<1s)
🌙 Dark Mode	Automatic dark mode support with system preference detection
♿ Accessible	WCAG 2.1 AA compliant with semantic HTML
📝 Easy Updates	Single JSON file configuration - no coding needed
🎓 Academic Focused	Specialized sections for research, teaching, and publications
🔒 Production Ready	Optimized builds, lazy loading, and code splitting

�️ Technology Stack

Built with Modern, Industry-Leading Technologies

React 18
_{UI Framework}

TypeScript
_{Type Safety}

Vite
_{Build Tool}

Tailwind CSS
_Styling

Core Technologies:

🎭 Framer Motion - Professional-grade animations
🎨 shadcn/ui - Beautiful, accessible components
🔍 React Helmet - Dynamic SEO management
🎯 Lucide Icons - 1000+ crisp, modern icons
🗺️ React Router - Seamless navigation

📱 Portfolio Sections

🏠 Hero Section

Professional profile photo with elegant animations
Name, designation, and institutional affiliation
Inspiring tagline and quick statistics
Call-to-action buttons for contact and CV download
Smooth scroll indicators

👤 About Section

Comprehensive biography with rich formatting
Education timeline with institutions and degrees
Career positions with descriptions
Key highlights and achievements
Professional experience showcase

🔬 Research Section

Research interests and focus areas
Active and completed projects
Funding information and collaborators
Research impact and outcomes
Related publications links

🎓 Teaching Section

Teaching philosophy and methodology
Courses taught with descriptions
Student statistics and reach
Educational resources and materials
Teaching awards and recognition

📚 Classroom (Courses)

Detailed course pages with syllabi
Video tutorials and PDF notes
GitHub repositories with code examples
Interactive quizzes and assessments
Course materials organized by topic

🧠 Brain Pops (Quizzes)

Interactive educational quizzes
Programming challenges and puzzles
Multiple quiz types and categories
External quiz links (Google Forms, etc.)
Student engagement tools

💻 TechieBites (Articles)

Technology articles and tutorials
Programming tips and best practices
Industry insights and trends
Code snippets and examples
Read time and categories

🎮 TimePass (Puzzles)

Mathematical puzzles and brain teasers
Fun challenges for students
Video solutions and explanations
Interactive problem-solving
Difficulty levels

📧 Contact Section

Multiple contact methods (email, phone)
Office location with interactive map
Office hours and availability
Social media links with icons
Contact form (optional)

🌐 Deployment on Vercel

Deploy Your Portfolio to Vercel in 3 Easy Steps

📋 Step-by-Step Deployment Guide

Method 1: One-Click Deploy (Easiest)

Click the "Deploy with Vercel" button above
Sign in to Vercel (using GitHub account)
Click "Deploy" - Vercel will automatically configure everything
Wait 2-3 minutes for the build to complete
Your portfolio is live! 🎉

Method 2: Manual Deployment via Vercel Dashboard

# 1. Push your code to GitHub
git add .
git commit -m "Initial commit"
git push origin main

# 2. Go to https://vercel.com/new
# 3. Import your GitHub repository
# 4. Configure build settings (auto-detected):

Build Settings:

Framework Preset: Vite
Build Command: npm run build
Output Directory: dist
Install Command: npm install

Environment Variables: (Optional)

Add any custom environment variables if needed

Click "Deploy" and you're done! ✨

Method 3: Deploy via Vercel CLI

# Install Vercel CLI globally
npm install -g vercel

# Login to Vercel
vercel login

# Deploy to production
vercel --prod

# Follow the prompts and your site will be live!

🔄 Automatic Deployments

Once connected, Vercel automatically:

✅ Builds on every push to main branch
✅ Creates preview URLs for pull requests
✅ Provides free SSL certificate
✅ Enables global CDN for fast loading
✅ Offers analytics and performance monitoring
✅ Supports custom domains (free)

🔗 Custom Domain Setup

Go to your project settings in Vercel
Navigate to Domains section
Add your custom domain (e.g., yourname.com)
Update DNS records as instructed
SSL is automatically configured

📊 Post-Deployment

After deployment, you can:

View live site at the provided Vercel URL
Check deployment logs for any issues
Enable Vercel Analytics for visitor insights
Set up custom domains for professional branding
Configure environment variables if needed

� Why Vercel?

🚀 Lightning Fast - Edge network for global performance
🔒 Secure - Automatic HTTPS and DDoS protection
💰 Free for Personal - Perfect for academic portfolios
🔄 Git Integration - Deploy on every git push
📈 Built-in Analytics - Track your portfolio visitors
🌍 Global CDN - Fast loading worldwide

🔀 Alternative Hosting Options

Deploy to Netlify

# Push to GitHub
git push origin main

# Visit https://app.netlify.com/start
# Connect your repository
# Build settings:
# - Build command: npm run build
# - Publish directory: dist

Deploy to GitHub Pages

# Install gh-pages package
npm install --save-dev gh-pages

# Add to package.json scripts:
# "deploy": "npm run build && gh-pages -d dist"

# Deploy
npm run deploy

📖 GitHub Pages Setup Guide

� Advanced Customization

🎓 Add New Courses

Edit src/data/classroom.json:

{
  "title": "Python Programming",
  "slug": "python-programming",
  "icon": "Code",
  "level": "Undergraduate",
  "description": "Learn Python from basics to advanced",
  "topics": ["Variables", "Functions", "OOP"],
  "materials": [
    {
      "title": "Introduction to Python",
      "type": "Video",
      "url": "https://youtube.com/watch?v=..."
    }
  ]
}

🧠 Add Interactive Quizzes

Edit src/data/brainpop.json:

{
  "title": "C Programming Quiz",
  "category": "C Programming",
  "type": "Multiple Choice",
  "difficulty": "Intermediate",
  "url": "https://forms.google.com/..."
}

💻 Add Tech Articles

Edit src/data/techiebites.json:

{
  "title": "Understanding AI in Education",
  "excerpt": "Brief introduction...",
  "content": "Full article content...",
  "category": "Artificial Intelligence",
  "date": "2025-01-01",
  "readTime": "5 min",
  "author": "Your Name"
}

🔗 Update Social Media Links

Edit src/data/profile.json:

{
  "socialLinks": {
    "github": "https://github.com/yourusername",
    "linkedin": "https://linkedin.com/in/yourprofile",
    "youtube": "https://youtube.com/@yourchannel",
    "website": "https://yourwebsite.com"
  }
}

🎯 SEO & Performance

Optimized for Maximum Visibility

Metric	Score	Description
🚀 Performance	95+	Lighthouse score with optimized assets
♿ Accessibility	100	WCAG 2.1 AA compliant
🎨 Best Practices	100	Modern web standards
🔍 SEO	100	Complete meta tags & structured data

Built-in SEO Features:

✅ Dynamic meta tags for each page
✅ Open Graph tags for social sharing
✅ Twitter Card support
✅ Structured data (JSON-LD)
✅ Sitemap generation
✅ Robots.txt configuration
✅ Canonical URLs
✅ Image optimization

🐛 Troubleshooting

❓ Common Issues & Solutions

Profile Photo Not Showing

# ✅ Solution
# 1. Check file exists: public/profile-photo.jpg
# 2. Verify path in profile.json: "/profile-photo.jpg"
# 3. Clear cache and hard refresh (Ctrl+Shift+R)

Build Fails

# ✅ Solution
# 1. Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# 2. Check for JSON syntax errors
npm run validate-json

Content Not Updating

# ✅ Solution
# 1. Stop the dev server (Ctrl+C)
# 2. Clear browser cache
# 3. Restart server
npm run dev

Port Already in Use

# ✅ Solution
# Kill process on port 5173
kill -9 $(lsof -t -i:5173)
# Or use a different port
npm run dev -- --port 3000

🔐 Admin Dashboard Setup

The platform includes a secure admin dashboard for authorized users to edit content without modifying code.

Firebase Configuration

Create a Firebase Project
- Go to Firebase Console
- Create a new project or use an existing one
- Enable Authentication (Email/Password provider)
- Enable Firestore Database
Get Your Firebase Credentials
- In Firebase Console, go to Project Settings > General
- Scroll down to "Your apps" section
- Copy your Firebase configuration

Set Up Environment Variables

# Create .env file

# Edit .env with your Firebase credentials
nano .env

Add Your Credentials to .env

VITE_FIREBASE_API_KEY=your-api-key-here
VITE_FIREBASE_AUTH_DOMAIN=your-project.firebaseapp.com
VITE_FIREBASE_PROJECT_ID=your-project-id
VITE_FIREBASE_STORAGE_BUCKET=your-project.appspot.com
VITE_FIREBASE_MESSAGING_SENDER_ID=123456789
VITE_FIREBASE_APP_ID=your-app-id-here

Create Admin User
- In Firebase Console, go to Authentication
- Click "Add user"
- Enter your admin email and password
- This account will be able to access /admin/dashboard

Using the Admin Dashboard

Navigate to /admin/login in your deployed site
Sign in with your admin credentials
Access the dashboard to edit:
- Profile information and contact details
- Classroom courses and materials
- BrainPops quizzes
- TechieBites articles
- TimePass puzzles

🔒 Security Note: The admin routes are completely separate from public pages. End users will never see login forms or admin interfaces.

Vercel Deployment with Environment Variables

When deploying to Vercel:

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

# Add environment variables in Vercel Dashboard:
# Go to: Project Settings > Environment Variables
# Add all VITE_FIREBASE_* variables from your .env file

Or add them via CLI:

vercel env add VITE_FIREBASE_API_KEY
vercel env add VITE_FIREBASE_AUTH_DOMAIN
# ... repeat for all Firebase variables

🤝 Contributing

We welcome contributions! Here's how you can help:

🐛 Report Bugs - Open an issue with details
💡 Suggest Features - Share your ideas
🔧 Submit PRs - Fix bugs or add features
📖 Improve Docs - Help others understand

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

📝 Note: Free to use for academic and personal portfolios. Please provide attribution by linking back to this repository.

🌟 Showcase

Join Our Community of Educators

Built by educators, for educators

If this project helped you, please consider:

⭐ Starring this repository
🔗 Sharing with colleagues
💬 Providing feedback
🤝 Contributing improvements

Made with ❤️ for Advancing Knowledge

Empowering educators to share their expertise with the world

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 4 Commits
public		public
src		src
.gitignore		.gitignore
LICENSE		LICENSE
README.md		README.md
bun.lockb		bun.lockb
components.json		components.json
eslint.config.js		eslint.config.js
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.ts		tailwind.config.ts
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation