🚀 SkillSpark - Gen Z Career Identity OS

A modern, interactive portfolio platform designed specifically for Gen Z professionals to build, customize, and share their digital career identity.

🌟 Overview

SkillSpark revolutionizes how young professionals showcase their skills and experience. Built with modern web technologies, it offers an intuitive platform for creating stunning, personality-driven portfolios that stand out in today's competitive job market.

✨ Features

🎨 Portfolio Builder

• Interactive Dashboard - Clean, modern interface with smooth animations
• Project Management - Add, edit, and showcase your work with tech stacks
• Timeline Builder - Visual career journey with education and experience
• 4 Personality Themes - Minimalist, Brutalist, Vaporwave, Modern

🔧 Technical Features

• Real-time Data Sync - Firebase Firestore integration
• User Authentication - Email/Password + Google OAuth
• PDF Export - High-quality portfolio downloads
• Responsive Design - Perfect on all devices
• Public Sharing - Shareable portfolio URLs

🎯 User Experience

• Drag & Drop - Intuitive content management
• Live Preview - See changes in real-time
• Theme Switching - Instant personality changes
• Performance Optimized - Fast loading with smooth animations

🛠️ Tech Stack

Frontend

• React.js - Modern UI library
• Tailwind CSS - Utility-first styling
• Framer Motion - Smooth animations
• React Router - Client-side routing
• html2pdf.js - PDF generation

Backend

• Node.js - JavaScript runtime
• Express.js - Web framework
• Firebase Admin - Server-side Firebase integration

Database & Auth

• Firebase Firestore - NoSQL database
• Firebase Authentication - User management
• Firebase Hosting - Deployment platform

Development Tools

• Create React App - Development setup
• PostCSS - CSS processing
• ESLint - Code linting

📱 Screenshots

Dashboard

Project Management

Timeline Builder

Portfolio Themes

🚀 Quick Start

Prerequisites

• Node.js (v14 or higher)
• npm or yarn
• Firebase account

Installation

1. Clone the repository

git clone https://github.com/yourusername/skillspark.git
cd skillspark

2. Install dependencies

# Install client dependencies
cd client
npm install

# Install server dependencies
cd ../server
npm install

3. Set up Firebase

• Create a Firebase project at console.firebase.google.com
• Enable Authentication (Email/Password + Google)
• Create Firestore database
• Copy your config to .env files (see .env.example)

4. Configure environment variables

# Client environment
cp client/.env.example client/.env
# Add your Firebase config

# Server environment
cp server/.env.example server/.env
# Add your Firebase admin config

5. Start development servers

# Start client (in client directory)
npm start

# Start server (in server directory)
npm run dev

6. Open your browser Navigate to http://localhost:3000

📁 Project Structure

skillspark/
├── client/                     # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/         # Reusable components
│   │   ├── pages/             # Page components
│   │   ├── utils/             # Utility functions
│   │   ├── config/            # Configuration files
│   │   └── styles/            # Global styles
│   ├── package.json
│   └── tailwind.config.js
├── server/                     # Node.js backend
│   ├── routes/                # API routes
│   ├── middleware/            # Custom middleware
│   ├── config/                # Server configuration
│   └── server.js              # Main server file
├── docs/                      # Documentation
└── README.md

🎯 Usage

Creating Your Portfolio

1. Sign Up - Create account with email or Google
2. Add Projects - Showcase your work with descriptions and tech stacks
3. Build Timeline - Add education, work experience, and achievements
4. Choose Theme - Select from 4 personality-driven designs
5. Export & Share - Generate PDF or share public URL

API Endpoints

POST   /api/auth/register      # User registration
POST   /api/auth/login         # User login
GET    /api/user/profile       # Get user profile
PUT    /api/user/profile       # Update profile
GET    /api/projects           # Get user projects
POST   /api/projects           # Create project
PUT    /api/projects/:id       # Update project
DELETE /api/projects/:id       # Delete project
GET    /api/timeline           # Get timeline events
POST   /api/timeline           # Create timeline event

🌐 Deployment

Frontend (Vercel/Netlify)

# Build for production
cd client
npm run build

# Deploy to Vercel
vercel --prod

# Or deploy to Netlify
netlify deploy --prod --dir=build

Backend (Heroku/Railway)

# Deploy to Heroku
cd server
git subtree push --prefix server heroku main

# Or deploy to Railway
railway deploy

Firebase Hosting

# Install Firebase CLI
npm install -g firebase-tools

# Login and deploy
firebase login
firebase deploy

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

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

📝 License

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

👨‍💻 Author

Prabinder Singh

• GitHub: @prabindersingh
• LinkedIn: Prabinder Singh
• Email: prabindersinghh@gmail.com

🙏 Acknowledgments

• Firebase for backend infrastructure
• Tailwind CSS for styling system
• Framer Motion for animations
• React community for amazing ecosystem

🔮 Future Enhancements

• AI-powered content suggestions
• Social media integrations
• Advanced analytics dashboard
• Team collaboration features
• Mobile app version
• Adobe Firefly API integration
• Custom domain support
• Advanced theme customization

📊 Project Stats

• Lines of Code: ~5,000+
• Components: 15+
• API Endpoints: 12+
• Themes: 4
• Supported Formats: PDF, Web

---

⭐ Star this repository if you found it helpful!

Built with ❤️ for the Gen Z developer community