📄⛓️‍💥 Refolio

Re-Folio lets you beautifully showcase your 🤹 skills, 🗄️ projects, and 💼 experience — all in a sleek, modern format 🧪.

Important

If you find this repository helpful and want to support the project, please give it a star on GitHub! Your star helps the development.

Note

Expect bugs and errors because the project is currently in beta stage.

🙋‍♀️ What is ReFolio?

Re-Folio is designed to help you create stunning 📄 resume portfolios with ease. Whether you're a 🎨 designer, 🖥️ developer, or 📱 creative professional, showcase your 🏮 skills and stand out with our platform's 🛠️ tools..

✨ Features

A modern resume-portfolio template built with the Once UI Core package, designed for developers and creatives.

1. 🔐 Easy Sign-up/Login

2. 🌐 Personalized Portfolio URL: re-folio.vercel.app/@username

3. 📋 Comprehensive Profile Sections:

• 🎯 Navigation Bar

• 👋 Introduction

• 💼 Experience

• 🛠️ Projects

• 🎓 Education

• ⚡ Skills/Stack

• 📜 Certifications

• 🏆 Awards

• 🌍 Languages

• ℹ️ Summary

4. ⚙️ Settings Panel: User-friendly interface for updates

5. 🔒 Password Protection: Optional portfolio security

6. 📱 Responsive Design: Looks great on all devices

7. ⚡ Real-time Updates: Instant changes with Supabase

Try it out to see how it works.

🛠️ Technology Stack

• ⚛️ Next.js (React Framework)
• 🟦 TypeScript (Type Safety)
• 🟨 Javascript (JSON config)
• 🎨 SCSS (Design Tokens, Theming)
• 🦸 Supabase (Database & Auth)
• 🔤 Google Fonts (Typography)
• ▲ Vercel (Deployment)
• 🧩 Custom Once-UI Design System (Reusable components & tokens)

🎥 Demo

Check the demo.

🌠 Getting Started

Follow these instructions to get a local copy of Re-Folio up and running for development.

⚙️ Prerequisites

1. Node.js (v18 or newer recommended)

2. npm, yarn, or pnpm

📩 Installation

1. 🌐 Clone the repository:

   git clone https://github.com/divyanshudhruv/re-folio.git

2. 🧭 Navigate to the project directory:

   cd re-folio

3. 🗃️ Install dependencies:

   npm install
   # or
   # yarn install
   # or
   # pnpm install

4. 🏡 Set up environment variables:

   • Copy the example environment file:

     cp .env.example .env

   • Open the .env file and add your Supabase project URL and anon key:

     SUPABASE_URL=your_supabase_url_here
     SUPABASE_ANON_KEY=your_supabase_anon_key_here

     You can get these from your Supabase project settings.

5. 🏃‍♂️ Run the development server:

   npm run dev

6. Open http://localhost:3000 in your browser to see the application.

😑 Configuration (admins)

The primary configuration needed for local development is your Supabase credentials, which are stored in the .env file:

• SUPABASE_URL: Your Supabase project URL.
• SUPABASE_ANON_KEY: Your Supabase project's public anonymous key.

These are essential for connecting to Supabase for authentication, database operations, and file storage.

🧩 Design System & Customization (dev) 🧩

• 🎨 Tokens:

  • All design tokens (colors, spacing, typography) are in src/once-ui/tokens/.
  • Change theme, brand, accent, and more in src/app/resources/config.js.

• 🧱 Components:

  • Use any component from @/once-ui/components in your pages.
  • Example:

    import { Button, Text, Heading } from "@/once-ui/components";

• 🌗 Theming:

  • Unfortunately supports only dark mode 🥲.

📁 Project Structure

A brief overview of the project's directory structure:

divyanshudhruv/re-folio
├── app/                      # Next.js App Router: Pages, Layouts, API Routes
│   ├── (main)/               # Main application group
│   │   ├── page.tsx          # Landing/Login page
│   │   ├── layout.tsx        # Main layout for public pages
│   │   ├── (components)/...  # Display components for portfolio sections
│   │   ├── [user]/           # Dynamic route for public user portfolios
│   │   │   └── page.tsx
│   │   ├── auth/             # Authentication related pages (e.g., callback)
│   │   └── user/me/          # User's private settings page
│   │       └── page.tsx
│   ├── api/                  # API routes (e.g., OG image generation)
│   ├── hooks/                # Custom React hooks
│   └── lib/                  # Utility functions, Supabase client
├── components/               # Shared UI components (e.g., Providers)
├── lib/                      # General utility functions
├── public/                   # Static assets (images, etc.)
├── resources/                # UI configuration, icons
├── .env.example              # Example environment variables
├── next.config.mjs           # Next.js configuration
├── package.json              # Project dependencies and scripts
└── tsconfig.json             # TypeScript configuration

👥 Creators

Connect with us!

1. 👨‍💻 Divyanshu Dhruv: Site / LinkedIn

🚩 License

See LICENSE for details. 📜

🏷️ Credits

• 🧩 Built with Once UI
• 🦸 Powered by Supabase

Crafted with ☕ by the indie creators for the open-source community.