Skip to content

Latest commit

 

History

History
316 lines (230 loc) · 6.98 KB

File metadata and controls

316 lines (230 loc) · 6.98 KB

⚡ Portlify

AI-Powered Resume to Portfolio in Seconds

Live Demo License

FeaturesArchitectureQuick StartAPI


🎯 What is Portlify?

Portlify transforms your PDF resume into a beautiful, responsive portfolio website using AI. Upload your resume, get a shareable portfolio URL instantly. No coding required.

Resume.pdf → AI Parser → Professional Portfolio → Share Anywhere

🎬 Demo

demo-v22-full.mp4


Open Live App


Live Example: portlifyai.app/username


✨ Features

🤖 AI-Powered

  • Smart resume parsing with Google Gemini
  • Auto skill categorization (6 categories)
  • Experience & project extraction
  • Contact & social links detection

🎨 Design

  • Dark/Light theme support
  • Mobile-first responsive design
  • Glassmorphic UI elements
  • Smooth animations (Framer Motion)

⚙️ Core

  • Custom username URLs
  • Real-time profile editor
  • Portfolio analytics dashboard
  • Export as static ZIP

👑 Premium

  • Username customization
  • Custom footer branding
  • Priority support
  • Premium badge

🏗️ Architecture

graph TB
    A[Client: React + Vite] --> B[API: Express.js]
    B --> C[Database: MongoDB]
    B --> D[AI: Google Gemini]
    B --> E[Storage: Cloudinary]
    B --> F[Payments: Razorpay]
    
    style A fill:#6366f1
    style B fill:#10b981
    style C fill:#f59e0b
    style D fill:#ec4899
    style E fill:#8b5cf6
    style F fill:#ef4444
Loading

Request Flow

Upload PDF → Extract Text → AI Analysis → Parse Data → Store in DB → Generate Portfolio

🛠️ Tech Stack

Layer Technologies
Frontend React 18 · Vite · Tailwind CSS · Framer Motion · React Router
Backend Node.js · Express · MongoDB · Mongoose · Clerk Auth
AI/ML Ollama Cloud (gemma3:4b) · PDF/DOC/DOCX Parse · NLP
Services Cloudinary (Images) · Razorpay (Payments) · Vercel (Hosting)
Tools Git · npm · MongoDB Atlas · VS Code

🚀 Quick Start

Prerequisites

Node.js 18+ · MongoDB Atlas · Clerk · Ollama Cloud API · Cloudinary · Razorpay

Installation

# Clone repository
git clone https://github.com/techycsr/portlify.git && cd portlify

# Backend setup
cd backend && npm install
cp .env.example .env  # Configure environment variables
npm run dev

# Frontend setup (new terminal)
cd frontend && npm install
cp .env.example .env  # Configure environment variables
npm run dev

Environment Variables

Backend (.env)
PORT=5000
MONGODB_URI=your_mongodb_uri
CLERK_SECRET_KEY=your_clerk_secret
CLERK_PUBLISHABLE_KEY=your_clerk_publishable
OLLAMA_API_KEY=your_ollama_api_key
CLOUDINARY_CLOUD_NAME=your_cloud_name
CLOUDINARY_API_KEY=your_cloudinary_key
CLOUDINARY_API_SECRET=your_cloudinary_secret
RAZORPAY_KEY_ID=your_razorpay_key
RAZORPAY_KEY_SECRET=your_razorpay_secret
FRONTEND_URL=http://localhost:5173
Frontend (.env)
# Do NOT include /api suffix
VITE_API_URL=http://localhost:5000
VITE_APP_URL=http://localhost:5173
VITE_CLERK_PUBLISHABLE_KEY=your_clerk_publishable

Access: http://localhost:5173


📡 API Reference

Endpoints Overview

Category Endpoints Description
Auth /api/auth/* User authentication, registration, username management
Profile /api/profile/* CRUD operations, resume parsing, visibility control
Analytics /api/analytics/* View tracking, visitor insights, engagement metrics
Payment /api/payment/* Premium subscriptions, Razorpay integration
Export /api/export/* Download portfolio as static site ZIP
View Detailed Endpoints

Authentication

GET    /api/auth/me
POST   /api/auth/register
PUT    /api/auth/username
GET    /api/auth/check-username?username=

Profile Management

GET    /api/profile/me
GET    /api/profile/:username
PUT    /api/profile
POST   /api/profile/parse
PUT    /api/profile/visibility
POST   /api/profile/reset

Analytics

GET    /api/analytics
POST   /api/analytics/track

Payments

GET    /api/payment/status
POST   /api/payment/create-order
POST   /api/payment/verify
GET    /api/payment/branding
PUT    /api/payment/branding

Export

GET    /api/export/portfolio

📁 Project Structure

portlify/
├── frontend/
│   ├── src/
│   │   ├── components/    # Reusable UI components
│   │   ├── pages/         # Page components
│   │   ├── context/       # React contexts
│   │   ├── hooks/         # Custom hooks
│   │   └── utils/         # Helper functions
│   └── package.json
│
├── backend/
│   ├── src/
│   │   ├── routes/        # API endpoints
│   │   ├── models/        # Mongoose schemas
│   │   ├── middleware/    # Express middleware
│   │   └── utils/         # Utilities
│   └── package.json
│
├── README.md
└── LICENSE

🎯 Skills Categorization

AI automatically organizes skills into 6 categories:

Category Examples
Languages JavaScript, Python, Java, C++, TypeScript, Go, Rust
Frameworks React, Node.js, Django, Spring Boot, Express, Next.js
Databases MongoDB, PostgreSQL, MySQL, Redis, Firebase, Cassandra
Tools Git, Docker, AWS, Kubernetes, Jenkins, GitHub Actions
Concepts DSA, System Design, OOP, Microservices, CI/CD
Soft Skills Leadership, Communication, Problem Solving, Teamwork

🤝 Contributing

Contributions are welcome! Follow these steps:

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

📄 License

This project is licensed under the MIT License. See LICENSE for details.


Made by @TechyCSR