🚀 Relio - Resume to Portfolio in Seconds

Transform your resume into a stunning portfolio website powered by AI

Made for FutureStackGenAI Hackathon 2025 🎯

Demo • Features • Quick Start • Tech Stack • Contributing

📖 About

Relio is a modern SaaS platform that leverages the power of AI to automatically convert resumes (PDF/DOCX) into beautiful, responsive portfolio websites. Built with Next.js 15, Prisma, and Cerebras AI, Relio makes it incredibly easy for developers, designers, and professionals to showcase their work online.

Why Relio?

⚡ Lightning Fast: Get your portfolio in seconds, not hours
🤖 AI-Powered: Cerebras AI intelligently extracts and structures your resume data
🎨 Beautiful Templates: Choose from multiple stunning, responsive designs
🆓 Try Without Signup: Test the platform anonymously before committing
🔒 Secure: Multi-provider authentication with NextAuth.js
🌐 Custom URLs: Get your personalized portfolio at /your-username

🎬 Demo

Landing Page

Modern, eye-catching landing page with interactive pixel blast animation

Portfolio Demo (Static)

Clean, professional portfolio layout with all your information beautifully organized

Portfolio Demo (Animated)

Dynamic, animated portfolio with smooth transitions and modern design

Sign In Page

Seamless authentication with Google, GitHub, or email/password

✨ Features

🤖 AI-Powered Resume Parsing

Relio uses Cerebras Cloud SDK to intelligently extract:

Personal information (name, contact, social links)
Professional skills and technologies
Work experience with detailed achievements
Education history
Projects with descriptions
And more!

🎨 Multiple Portfolio Templates

Choose from beautifully designed templates:

Default: Classic, professional layout
Animated: Dynamic with smooth transitions and effects
Minimal: Clean and simple design
More templates coming soon!

🔐 Flexible Authentication

Google OAuth: Sign in with your Google account
GitHub OAuth: Authenticate via GitHub
Email/Password: Traditional credentials
Anonymous Mode: Try without signing up (24-hour temporary portfolios)

🆓 Try Without Signup

Experience Relio risk-free:

Upload your resume without creating an account
Get a temporary portfolio with a random username
Portfolio expires in 24 hours unless you sign up
Seamlessly convert to permanent account later

📊 User Dashboard

Manage your portfolio with ease:

Create multiple portfolios
Edit portfolio information
Switch between templates
Choose from 100 unique avatars
Customize your slug/URL

🌐 Dynamic Routing

Each user gets their own custom portfolio URL:

https://relio.app/john-doe
https://relio.app/jane-designer
https://relio.app/creative-dev

⏰ Automatic Cleanup

Scheduled jobs automatically remove expired temporary portfolios, keeping the database clean and efficient.

🛠️ Tech Stack

Frontend

Next.js 15 - React framework with App Router
TypeScript - Type-safe development
TailwindCSS 4 - Utility-first CSS framework
Framer Motion - Smooth animations
Radix UI - Accessible component primitives
Lucide React - Beautiful icons
Three.js - 3D graphics for animations

Backend

PostgreSQL - Robust relational database
Prisma ORM - Type-safe database client
NextAuth.js - Complete authentication solution
Cerebras Cloud SDK - AI-powered resume parsing

File Processing

unpdf - PDF text extraction
mammoth - DOCX document parsing
react-dropzone - Drag & drop file uploads

Developer Tools

ESLint - Code linting
Prettier - Code formatting
Vercel Analytics - Performance monitoring
Vercel Speed Insights - Real-time metrics

📋 Prerequisites

Before you begin, ensure you have the following installed:

Node.js 18+ (with npm, yarn, or pnpm)
PostgreSQL database (local or cloud)
Cerebras API Key (Get yours here)
OAuth Credentials (optional, for Google/GitHub login)

🚀 Quick Start

1️⃣ Clone the Repository

git clone https://github.com/xkaper001/relio.git
cd relio

2️⃣ Install Dependencies

npm install
# or
yarn install
# or
pnpm install

3️⃣ Environment Configuration

Create a .env file in the root directory:

# ==========================================
# DATABASE
# ==========================================
DATABASE_URL="postgresql://user:password@localhost:5432/relio"

# ==========================================
# NEXTAUTH
# ==========================================
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-super-secret-key-generate-with-openssl"

# ==========================================
# CEREBRAS AI
# ==========================================
CEREBRAS_API_KEY="your-cerebras-api-key"

# ==========================================
# GOOGLE OAUTH (Optional)
# ==========================================
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# ==========================================
# GITHUB OAUTH (Optional)
# ==========================================
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"

Generate NEXTAUTH_SECRET:

openssl rand -base64 32

4️⃣ Database Setup

# Generate Prisma Client
npx prisma generate

# Run database migrations
npx prisma migrate dev --name init

# (Optional) Open Prisma Studio to view/edit data
npx prisma studio

5️⃣ Run Development Server

npm run dev

Open http://localhost:3000 in your browser to see Relio in action! 🎉

📁 Project Structure

relio/
├── prisma/
│   ├── schema.prisma              # Database schema definition
│   └── migrations/                # Database migration files
├── public/
│   ├── avatars/                   # 100 unique SVG avatars (001-100)
│   └── *.svg                      # Static assets
├── screenshots/                   # Project screenshots
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── auth/              # NextAuth API routes
│   │   │   ├── upload/            # Resume upload endpoint
│   │   │   ├── portfolio/         # Portfolio CRUD operations
│   │   │   ├── dashboard/         # Dashboard data API
│   │   │   └── cleanup/           # Temporary user cleanup
│   │   ├── auth/                  # Authentication pages
│   │   ├── dashboard/             # User dashboard UI
│   │   ├── try/                   # Anonymous try mode
│   │   ├── [slug]/                # Dynamic portfolio routes
│   │   ├── layout.tsx             # Root layout
│   │   ├── page.tsx               # Landing page
│   │   └── globals.css            # Global styles
│   ├── components/
│   │   ├── ui/                    # Reusable UI components
│   │   ├── PortfolioView.tsx      # Portfolio renderer
│   │   ├── PixelBlast.tsx         # Animated background
│   │   └── Providers.tsx          # Context providers
│   ├── lib/
│   │   ├── ai.ts                  # Cerebras AI integration
│   │   ├── auth.ts                # NextAuth configuration
│   │   ├── prisma.ts              # Prisma client singleton
│   │   └── utils.ts               # Utility functions
│   ├── types/                     # TypeScript type definitions
│   ├── data/                      # Static data/constants
│   └── hooks/                     # Custom React hooks
├── package.json
├── tsconfig.json
├── next.config.ts
├── tailwind.config.ts
└── README.md

🔑 Key Features Deep Dive

1. Anonymous Try Mode (`/try`)

Perfect for first-time users who want to test the platform:

📤 Upload resume without creating an account
🎲 Get a random temporary username (e.g., temp-9281)
⏰ Portfolio expires in 24 hours
💾 Banner prompts to sign up and save permanently
🔄 Seamlessly migrate to permanent account

User Flow:

Visit /try
Upload resume (PDF/DOCX)
AI processes and generates portfolio
View temporary portfolio at /temp-[random-id]
Sign up to keep portfolio forever

2. AI Resume Parsing

Powered by Cerebras Cloud SDK, Relio intelligently extracts:

👤 Personal Information: Name, email, phone, location
🔗 Social Links: GitHub, LinkedIn, Twitter, portfolio
💼 Work Experience: Companies, roles, dates, achievements
🎓 Education: Degrees, institutions, graduation dates
🛠️ Skills: Technologies, languages, frameworks, tools
🚀 Projects: Titles, descriptions, technologies used
🏆 Achievements: Awards, certifications, publications

How it works:

Resume uploaded via drag-and-drop
Text extracted from PDF/DOCX
Sent to Cerebras AI with structured prompt
JSON response parsed and validated
Portfolio config stored in database
Real-time rendering with selected template

3. Authentication System

Flexible, secure authentication powered by NextAuth.js:

OAuth Providers:

🔴 Google: Sign in with your Google account
⚫ GitHub: Authenticate via GitHub
📧 Email/Password: Traditional credentials with bcrypt hashing

Features:

Session-based authentication
Secure password hashing
OAuth token management
Email verification support
Account linking
Protected API routes

4. Portfolio Templates

Choose from multiple professionally designed templates:

Default Template:

Clean, professional layout
Responsive grid system
Smooth scroll animations
Card-based sections

Animated Template:

Dynamic background effects
Smooth page transitions
Interactive hover states
Modern glass morphism

Minimal Template:

Simple, elegant design
Focus on content
Typography-driven
Fast loading

More templates coming soon!

5. Avatar System

100 unique SVG avatars (001-100) to choose from:

AI can auto-select based on your profession
Manual selection in dashboard
Lightweight SVG format
Consistent color palette
Professional designs

6. Cleanup Job (`/api/cleanup`)

Automated maintenance to keep the system clean:

🗑️ Deletes users where isTemporary = true and expiresAt < now
🔄 Runs via cron job (every 6 hours recommended)
🧹 Cascading delete removes all related data
📊 Returns count of deleted users

Setup with Vercel Cron:

Create vercel.json:

{
  "crons": [{
    "path": "/api/cleanup",
    "schedule": "0 */6 * * *"
  }]
}

Manual trigger:

curl -X POST https://your-app.vercel.app/api/cleanup

🎨 Customization Guide

Adding New Templates

Edit src/components/PortfolioView.tsx
Add your template variant
Update template selector in dashboard
Add preview image

// Example: Adding a "neon" template
case 'neon':
  return <NeonPortfolioLayout config={config} />

Modifying AI Prompts

Edit src/lib/ai.ts to customize resume parsing:

const prompt = `
You are a resume parsing AI. Extract the following:
- Add your custom instructions here
- Modify extraction rules
- Change output format
`

Database Schema Changes

Modify prisma/schema.prisma
Run migration:

npx prisma migrate dev --name your_migration_name

Update TypeScript types
Regenerate Prisma Client:

npx prisma generate

Styling Customization

Global Styles: Edit src/app/globals.css Tailwind Config: Modify tailwind.config.ts Component Styles: Update individual component files

🚢 Deployment

Deploy to Vercel (Recommended)

Push to GitHub:
```
git push origin main
```
Import to Vercel:
- Visit vercel.com
- Click "Import Project"
- Select your GitHub repository
Configure Environment Variables: Add all .env variables in Vercel dashboard
Deploy: Click "Deploy" and wait for build to complete
Setup Database:
- Use Vercel Postgres (recommended)
- Or connect external PostgreSQL
Configure Cron Jobs: Add vercel.json for automated cleanup

Database Options

Recommended Providers:

✅ Vercel Postgres - Seamless integration
✅ Supabase - Free tier, great DX
✅ Neon - Serverless Postgres
✅ PlanetScale - MySQL alternative
✅ Railway - Simple deployment

🔧 Troubleshooting

Prisma Client Not Generated

npx prisma generate

Database Connection Failed

✓ Check DATABASE_URL format
✓ Verify PostgreSQL is running
✓ Confirm credentials are correct
✓ Check firewall/network settings

OAuth Not Working

✓ Verify redirect URIs in OAuth app settings
✓ Check client ID/secret in .env
✓ Ensure NEXTAUTH_URL is correct
✓ Confirm OAuth app is enabled

File Upload Errors

✓ Check file size limits (default: 10MB)
✓ Verify supported formats (PDF, DOCX)
✓ Ensure temp directory exists
✓ Check server upload limits

Build Errors

# Clear Next.js cache
rm -rf .next

# Reinstall dependencies
rm -rf node_modules
npm install

# Rebuild
npm run build

📚 API Reference

`POST /api/upload`

Upload and parse resume

Request:

FormData {
  file: File (PDF/DOCX)
  userId?: string
}

Response:

{
  "success": true,
  "portfolio": { /* portfolio config */ },
  "slug": "username"
}

`GET /api/portfolio`

Get user's portfolio configuration

Response:

{
  "id": "...",
  "title": "My Portfolio",
  "slug": "username",
  "template": "default",
  "config": { /* portfolio data */ }
}

`POST /api/portfolio`

Create or update portfolio

Request:

{
  "title": "My Portfolio",
  "slug": "username",
  "template": "animated",
  "config": { /* portfolio data */ }
}

`POST /api/cleanup`

Delete expired temporary users

Response:

{
  "deleted": 42
}

🤝 Contributing

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

Reporting Bugs

Check existing issues first
Create detailed bug report
Include reproduction steps
Add screenshots if applicable

Suggesting Features

Open a feature request issue
Describe the feature clearly
Explain use cases
Discuss implementation ideas

Pull Requests

Fork the repository
Create a feature branch:
```
git checkout -b feature/amazing-feature
```
Make your changes
Write/update tests
Update documentation
Commit your changes:
```
git commit -m "Add amazing feature"
```
Push to your fork:
```
git push origin feature/amazing-feature
```
Open a Pull Request

Development Guidelines

Follow existing code style
Write meaningful commit messages
Add comments for complex logic
Update README if needed
Test your changes thoroughly

📄 License

This project is licensed under the MIT License.

MIT License

Copyright (c) 2025 Relio

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.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

🙏 Acknowledgments

Special thanks to:

Next.js Team - Amazing React framework
Cerebras AI - Powerful AI infrastructure
Prisma - Excellent ORM
NextAuth.js - Simple authentication
Tailwind CSS - Beautiful styling
Vercel - Seamless deployment
Radix UI - Accessible components
Framer Motion - Smooth animations
FutureStackGenAI Hackathon - Inspiration and motivation

📞 Support & Contact

Get Help

📖 Documentation (Coming Soon)
💬 Discussions
🐛 Issue Tracker

Connect With Us

🌐 Website: relio.app (Coming Soon)
💼 LinkedIn: Connect
🐦 Twitter: @relioapp
📧 Email: [email protected]

🎯 Roadmap

Phase 1: Core Features ✅

Phase 2: Enhancements 🚧

Phase 3: Advanced Features 🎨

Phase 4: Enterprise 🚀

📊 Stats

⚡ Built in: 48 hours (Hackathon)
🎯 Lines of Code: ~15,000+
🎨 Components: 50+
🧪 Technologies: 25+
💜 Made with: Passion & Coffee

⭐ Star us on GitHub — it motivates us a lot!

Made with ❤️ for FutureStackGenAI Hackathon 2025

⬆ Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 37 Commits
relio		relio
.gitignore		.gitignore
README.md		README.md

xkaper001/relio

Folders and files

Latest commit

History

Repository files navigation

🚀 Relio - Resume to Portfolio in Seconds

📖 About

Why Relio?

🎬 Demo

Landing Page

Portfolio Demo (Static)

Portfolio Demo (Animated)

Sign In Page

✨ Features

🤖 AI-Powered Resume Parsing

🎨 Multiple Portfolio Templates

🔐 Flexible Authentication

🆓 Try Without Signup

📊 User Dashboard

🌐 Dynamic Routing

⏰ Automatic Cleanup

🛠️ Tech Stack

Frontend

Backend

File Processing

Developer Tools

📋 Prerequisites

🚀 Quick Start

1️⃣ Clone the Repository

2️⃣ Install Dependencies

3️⃣ Environment Configuration

4️⃣ Database Setup

5️⃣ Run Development Server

📁 Project Structure

🔑 Key Features Deep Dive

1. Anonymous Try Mode (/try)

2. AI Resume Parsing

3. Authentication System

4. Portfolio Templates

5. Avatar System

6. Cleanup Job (/api/cleanup)

🎨 Customization Guide

Adding New Templates

Modifying AI Prompts

Database Schema Changes

Styling Customization

🚢 Deployment

Deploy to Vercel (Recommended)

Database Options

🔧 Troubleshooting

Prisma Client Not Generated

Database Connection Failed

OAuth Not Working

File Upload Errors

Build Errors

📚 API Reference

POST /api/upload

GET /api/portfolio

POST /api/portfolio

POST /api/cleanup

🤝 Contributing

Reporting Bugs

Suggesting Features

Pull Requests

Development Guidelines

📄 License

🙏 Acknowledgments

📞 Support & Contact

Get Help

Connect With Us

🎯 Roadmap

Phase 1: Core Features ✅

Phase 2: Enhancements 🚧

Phase 3: Advanced Features 🎨

Phase 4: Enterprise 🚀

📊 Stats

⭐ Star us on GitHub — it motivates us a lot!

About

Topics

Resources

1. Anonymous Try Mode (`/try`)

6. Cleanup Job (`/api/cleanup`)

`POST /api/upload`

`GET /api/portfolio`

`POST /api/portfolio`

`POST /api/cleanup`