Portfolio – Raza

🚀 Raza.me - Modern Developer Portfolio

A modern, blazing-fast, and feature-rich developer portfolio with Firebase integration, stunning animations, and a powerful blog CMS.

Features • Tech Stack • Quick Start • Deployment • License

📸 Preview

Project Link: www.mohdrazakhan.me

✨ Features

🎨 Modern UI/UX Sleek dark mode design Smooth animations with Framer Motion Fully responsive across all devices Glassmorphism effects Gradient accents	🔥 Blog CMS Split-screen live preview editor Firebase Storage image uploads Markdown-style formatting Draft/Publish system Real-time Firestore sync
🔐 Firebase Integration Email/Password authentication Firestore database Cloud Storage for images Real-time data updates Secure admin dashboard	📊 Project Showcase Dynamic project cards Firebase Storage integration Team/contributor tags Tech stack labels Status badges
🎯 Developer Tools QR Code generator Color palette tools JSON formatter Base64 encoder/decoder	⚡ Performance Vite for lightning-fast builds Optimized bundle size Lazy loading SEO optimized PWA ready

🛠️ Tech Stack

Frontend

Backend & Services

Routing & Icons

Deployment

📦 Key Dependencies

{
  "react": "^19.0.0",
  "vite": "^7.1.4",
  "tailwindcss": "^3.4.17",
  "framer-motion": "^12.23.12",
  "firebase": "^12.4.0",
  "react-router-dom": "^7.3.0",
  "lucide-react": "^0.542.0"
}

Core Technologies:

⚛️ React 19 - Modern UI library with hooks
⚡ Vite 7 - Next-generation frontend tooling
🎨 Tailwind CSS 3 - Utility-first CSS framework
🎭 Framer Motion 12 - Production-ready animation library
🔥 Firebase 12 - Backend as a service
🧭 React Router 7 - Client-side routing
🎯 Lucide Icons - Beautiful consistent icons

🚀 Quick Start

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18.x or higher (Download)
npm 9.x or higher (comes with Node.js)
Git (Download)
A Firebase project (Create one)

⚙️ Installation

# 1️⃣ Clone the repository
git clone https://github.com/mohdrazakhan/portfolio.git
cd portfolio

# 2️⃣ Navigate to project directory
cd portfolio

# 3️⃣ Install dependencies
npm install

# 4️⃣ Set up environment variables
cp .env.example .env
# Edit .env with your Firebase credentials

# 5️⃣ Start development server
npm run dev

🎉 Your portfolio is now running at http://localhost:5173

🔑 Environment Setup

Create a .env file in the root directory:

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=your_sender_id
VITE_FIREBASE_APP_ID=your_app_id

💡 Tip: Get these credentials from your Firebase Console → Project Settings → General

📁 Project Structure

portfolio/
├── 📂 public/                    # Static assets
│   ├── favicon.ico
│   ├── resume.pdf
│   ├── _redirects              # SPA routing for Netlify
│   └── images/
│       └── preview/
├── 📂 src/
│   ├── 📂 assets/              # Images & icons
│   │   ├── icons/
│   │   └── images/
│   ├── 📂 components/          # React components
│   │   ├── About.jsx
│   │   ├── Contact.jsx
│   │   ├── Footer.jsx
│   │   ├── Home.jsx
│   │   ├── Navbar.jsx
│   │   ├── Projects.jsx
│   │   ├── BlogSection.jsx
│   │   ├── RecentActivity.jsx
│   │   └── UI/
│   │       └── Card.jsx
│   ├── 📂 context/             # React Context API
│   │   └── AuthContext.jsx    # Firebase authentication
│   ├── 📂 data/                # Static data & config
│   │   ├── projects.js
│   │   ├── skills.js
│   │   ├── socials.js
│   │   └── activities.js
│   ├── 📂 firebase/            # Firebase configuration
│   │   └── app.js
│   ├── 📂 hooks/               # Custom React hooks
│   │   └── useTheme.js
│   ├── 📂 pages/               # Page components
│   │   ├── Admin.jsx           # Admin dashboard
│   │   ├── Blog.jsx            # Blog CMS
│   │   ├── BlogPost.jsx        # Single post view
│   │   ├── OptiRiderDetail.jsx # Project detail
│   │   ├── Tools.jsx           # Developer tools
│   │   └── Resources.jsx
│   ├── 📂 styles/              # Global styles
│   │   ├── components.css
│   │   └── globals.css
│   ├── App.jsx                 # Main app component
│   ├── main.jsx                # Entry point
│   └── index.css               # Base styles
├── .env.example                # Environment variables template
├── .gitignore
├── index.html                  # HTML template
├── package.json                # Dependencies
├── tailwind.config.js          # Tailwind configuration
├── postcss.config.js           # PostCSS configuration
├── vite.config.js              # Vite configuration
└── vercel.json                 # Vercel deployment config

⚙️ Configuration

📝 Content Customization

Edit the following files to personalize your portfolio:

File	Purpose
`src/data/projects.js`	Your project showcase
`src/data/skills.js`	Technical skills & expertise
`src/data/socials.js`	Social media links
`src/data/activities.js`	Recent activities timeline

🎨 Styling

Theme colors: tailwind.config.js
Global styles: src/styles/globals.css
Component styles: src/styles/components.css

🖼️ Assets

Replace public/images/profile.png with your photo
Update public/favicon.ico with your icon
Add your public/resume.pdf

🔥 Firebase Setup

1️⃣ Create Firebase Project

Go to Firebase Console
Click "Add project" and follow the wizard
Enable Google Analytics (optional)

2️⃣ Enable Authentication

In Firebase Console → Authentication → Get Started
Click Email/Password → Enable → Save
Add your admin user:
- Go to Users tab → Add user
- Enter your email and password

3️⃣ Set up Firestore Database

In Firebase Console → Firestore Database → Create database
Start in Production mode
Choose a location closest to your users
Add security rules:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{postId} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

4️⃣ Enable Firebase Storage

In Firebase Console → Storage → Get Started
Start in Production mode
Add security rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /projects/{fileName} {
      allow read: if true;
      allow write: if request.auth != null && request.resource.size < 5 * 1024 * 1024;
    }
    match /blog/{fileName} {
      allow read: if true;
      allow write: if request.auth != null && request.resource.size < 5 * 1024 * 1024;
    }
  }
}

5️⃣ Get Firebase Config

Go to Project Settings (⚙️ icon)
Scroll down to Your apps → Web app (</> icon)
Register app and copy the firebaseConfig object
Add these values to your .env file

🚀 Deployment

Choose Your Platform

🎯 Deploy to Vercel (Recommended)

Option 1: Via Dashboard (Easiest)

Push your code to GitHub
Go to Vercel Dashboard
Click "Add New" → "Project"
Import your GitHub repository
Configure:
- Framework Preset: Vite
- Build Command: npm run build
- Output Directory: dist
Add environment variables (all VITE_FIREBASE_* variables)
Click "Deploy"

Option 2: Via CLI

# Install Vercel CLI
npm i -g vercel

# Login to Vercel
vercel login

# Deploy
vercel

# Follow the prompts and add environment variables

🌐 Deploy to Netlify

Via Dashboard

Push your code to GitHub
Go to Netlify Dashboard
Click "Add new site" → "Import an existing project"
Connect to GitHub and select your repository
Configure:
- Build command: npm run build
- Publish directory: dist
Add environment variables
Click "Deploy site"

Via CLI

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy
netlify deploy --prod

⚙️ Important: Environment Variables

Add these in your deployment platform:

VITE_FIREBASE_API_KEY=your_value
VITE_FIREBASE_AUTH_DOMAIN=your_value
VITE_FIREBASE_PROJECT_ID=your_value
VITE_FIREBASE_STORAGE_BUCKET=your_value
VITE_FIREBASE_MESSAGING_SENDER_ID=your_value
VITE_FIREBASE_APP_ID=your_value

⚠️ Important: Set these for Production, Preview, and Development environments

📦 Build Locally

# Build for production
npm run build

# Preview the build
npm run preview

The build output will be in the dist/ directory.

🎯 Usage Guide

👨‍💼 Admin Dashboard

Navigate to /admin
Sign in with your Firebase credentials
Manage content:
- Projects: Add, edit, delete projects with Firebase Storage images
- Blog: Write, edit, publish blog posts
- Activities: Update your recent activities

📝 Blog Editor Features

Formatting

Bold, Italic, Underline
Headings (H1, H2, H3)
Code blocks
Lists (ordered/unordered)
Links

Media

Image upload to Firebase Storage
Live preview
Drag & drop support
URL paste option

Publishing

Draft/Publish toggle
Real-time Firestore sync
Edit published posts
Delete posts

UI/UX

Split-screen editor
Live preview
Fullscreen mode
Syntax highlighting

🎨 Customization

Color Scheme

Edit tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#6366f1',    // Indigo
        secondary: '#8b5cf6',  // Purple
        accent: '#ec4899',     // Pink
      }
    }
  }
}

Animations

All animations use Framer Motion. Customize in component files:

const variants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 }
}

📊 Performance

Metric	Score
⚡ Performance	95+
♿ Accessibility	100
🎯 Best Practices	100
📱 SEO	100

Lighthouse scores on production build

Optimization Features

✅ Code splitting with Vite
✅ Lazy loading images
✅ Optimized bundle size (~275 KB gzipped)
✅ Tree shaking
✅ Modern browser targets
✅ CSS purging with Tailwind
✅ Preload critical assets

🐛 Troubleshooting

Common Issues

White page after deployment

Solution:

Check browser console for errors
Verify all environment variables are set
Ensure vercel.json has correct rewrites
Check Firebase project is active

Firebase authentication errors

Solution:

Verify Firebase credentials in .env
Check Email/Password auth is enabled
Ensure admin user is created
Check Firestore security rules

Image upload not working

Solution:

Check Firebase Storage is enabled
Verify Storage security rules
Ensure you're logged in as admin
Check file size (max 5MB)

Build fails on Vercel/Netlify

Solution:

Check build logs for specific errors
Verify all dependencies in package.json
Test build locally: npm run build
Check Node.js version (18+)

📚 Scripts

Command	Description
`npm run dev`	Start development server on port 5173
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run lint`	Run ESLint (if configured)

🤝 Contributing

Contributions are welcome! Please follow these steps:

Fork the repository
Create a feature branch (git checkout -b feature/AmazingFeature)
Commit your changes (git commit -m 'Add some AmazingFeature')
Push to the branch (git push origin feature/AmazingFeature)
Open a Pull Request

Commit Convention

feat: Add new feature
fix: Fix bug
docs: Update documentation
style: Format code
refactor: Refactor code
test: Add tests
chore: Update dependencies

📄 License

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

MIT License

Copyright (c) 2025 Mohd Raza Khan

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

👨‍💻 Author

Mohd Raza Khan

Computer Science Engineering Student
Full Stack Developer | IoT Innovator | Open Source Enthusiast

🙏 Acknowledgments

React - The library for web and native user interfaces
Vite - Next generation frontend tooling
Tailwind CSS - A utility-first CSS framework
Framer Motion - Production-ready animation library
Firebase - App development platform
Lucide Icons - Beautiful & consistent icon toolkit
Vercel - Platform for frontend developers

⭐ Show Your Support

Give a ⭐️ if this project helped you!

📈 GitHub Stats

Made with ❤️ by Mohd Raza Khan

Happy Coding! 🚀

- Push to `main` on GitHub. - In repo Settings → Pages, set Source: “Deploy from a branch” or use an Actions workflow for Vite. - A typical Actions flow builds and publishes the `dist/` folder to `gh-pages`.

Manual publish to gh-pages branch

Build locally, then publish the dist/ directory to a gh-pages branch using your preferred tool.

Alternatively, deploy to Netlify or Vercel — both work great with Vite projects.

For SPA deep-links (e.g., /projects/optirider or /blog/:id) make sure rewrites are enabled:

Vercel: see vercel.json in the repo.
Netlify: see public/_redirects with /* /index.html 200.

Blog + Admin (Firebase)

The blog editor is visible only when you are logged in (email/password) via Firebase Auth. Posts are stored in Firestore and support draft/publish.

1) Environment variables

Create a .env file in the project root and add your Firebase credentials:

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...

Restart the dev server after changing .env.

2) Firebase setup

Enable Authentication → Sign-in method → Email/Password.
Create your admin user in Firebase Authentication Users.
Create a Firestore database in production mode.
Enable Firebase Storage for project image uploads.

Recommended Firestore security rules (adjust as needed):

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /posts/{postId} {
      allow read: if resource.data.published == true;
      allow read, write: if request.auth != null; // owner-only in UI
    }
  }
}

Recommended Storage security rules:

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /projects/{fileName} {
      allow read: if true;
      allow write: if request.auth != null && request.resource.size < 5 * 1024 * 1024;
    }
    match /blog/{fileName} {
      allow read: if true;
      allow write: if request.auth != null && request.resource.size < 5 * 1024 * 1024;
    }
  }
}

With these rules, public visitors can read only published posts. Authenticated you (admin) can create, update, delete posts and see drafts.

3) Admin Panel Features

Projects Manager: Add, edit, delete projects with:
- Firebase Storage image upload (drag-and-drop or paste URL)
- Live image preview
- Team/contributor support
- Tech stack tags
- Project status (Completed, In Progress, Planning)
- Featured project toggle
- Live demo and repo links
- Automatic statistics dashboard
Blog Manager: Full-featured rich text editor with draft/publish states
Activities Manager: Recent updates and timeline

4) One-time migration from localStorage

If you previously created posts locally (older version), the app will import them into Firestore automatically the first time an authenticated admin opens the Blog page (if Firestore is empty). A local flag prevents duplicate imports.

Screenshots

License

This project is licensed under the ISC license.

Made with ❤️ using React, Vite, Tailwind CSS, and Framer Motion. ❤️ Mohd Raza Khan ❤️

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
node_modules		node_modules
public		public
src		src
.DS_Store		.DS_Store
.env.example		.env.example
.gitignore		.gitignore
.vercelignore		.vercelignore
README.md		README.md
index.html		index.html
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
unnamed.jpg		unnamed.jpg
vercel.json		vercel.json
vite.config.js		vite.config.js

Folders and files

Latest commit

History

Repository files navigation

Portfolio – Raza

🚀 Raza.me - Modern Developer Portfolio

📸 Preview

✨ Features

🎨 Modern UI/UX

🔥 Blog CMS

🔐 Firebase Integration

📊 Project Showcase

🎯 Developer Tools

⚡ Performance

🛠️ Tech Stack

Frontend

Backend & Services

Routing & Icons

Deployment

📦 Key Dependencies

🚀 Quick Start

📋 Prerequisites

⚙️ Installation

🔑 Environment Setup

📁 Project Structure

⚙️ Configuration

📝 Content Customization

🎨 Styling

🖼️ Assets

🔥 Firebase Setup

1️⃣ Create Firebase Project

2️⃣ Enable Authentication

3️⃣ Set up Firestore Database

4️⃣ Enable Firebase Storage

5️⃣ Get Firebase Config

🚀 Deployment

Choose Your Platform

🎯 Deploy to Vercel (Recommended)

Option 1: Via Dashboard (Easiest)

Option 2: Via CLI

🌐 Deploy to Netlify

Via Dashboard

Via CLI

⚙️ Important: Environment Variables

📦 Build Locally

🎯 Usage Guide

👨‍💼 Admin Dashboard

📝 Blog Editor Features

🎨 Customization

Color Scheme

Animations

📊 Performance

Optimization Features

🐛 Troubleshooting

Common Issues

📚 Scripts

🤝 Contributing

Commit Convention

📄 License

👨‍💻 Author

Mohd Raza Khan

🙏 Acknowledgments

⭐ Show Your Support

📈 GitHub Stats

Blog + Admin (Firebase)

1) Environment variables

2) Firebase setup

3) Admin Panel Features

4) One-time migration from localStorage

Screenshots

License

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors