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

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..

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

• i️ 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.

• ⚛️ 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)

Check the demo.

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

1. Node.js (v18 or newer recommended)

2. npm, yarn, or pnpm

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.

• 🎨 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 🥲.

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

Connect with us!

1. 👨‍💻 Divyanshu Dhruv: Site / LinkedIn

See LICENSE for details. 📜

• 🧩 Built with Once UI
• 🦸 Powered by Supabase

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