GConnect

A professional contacts directory web app to connect with professionals across industries. Features a live animated background, search, and a responsive card-based UI — built with vanilla JavaScript and Supabase.

Overview

GConnect is a lightweight, client-side contacts directory where users can browse, search, and connect with professionals. The app uses Supabase as a backend-as-a-service for data storage and retrieval, with no server-side code needed.

Features

• Live Animated Background: Canvas-based floating orbs with gradient colors and pulse effects
• Search & Filter: Real-time search across names, roles, and industries
• Responsive Card Grid: Professional contact cards with gradient avatars and contact links
• Stats Dashboard: Live count of contacts in the directory
• Back-to-Top Button: Smooth scroll navigation for long lists
• No Framework Dependencies: Pure HTML, CSS, and JavaScript — no build step required

Tech Stack

• HTML5 / CSS3 / Vanilla JavaScript — No frameworks, no build tools
• Supabase — Backend database and real-time data
• Canvas API — Animated background effects
• Google Fonts (Inter) — Typography

Project Structure

GConnect/
├── index.html      # Main HTML structure
├── style.css       # All styling including responsive layout
├── script.js       # App logic: Supabase integration, search, animation
├── favicon.svg     # Custom SVG favicon
└── README.md       # This file

Setup

1. Clone the repository:

   git clone https://github.com/Pramod-Pasala/GConnect.git
   cd GConnect

2. Configure Supabase:

   • Create a free project at supabase.com
   • Create a contacts table with columns: id, name, role, industry, linkedin, email
   • Update the Supabase URL and publishable key in script.js

3. Run locally:

   # Any static file server works
   python -m http.server 8000
   # Or just open index.html in a browser

4. Open http://localhost:8000 in your browser

Customization

• Background colors: Edit the COLORS array in script.js to change orb colors
• Avatar gradients: Modify the AVATAR_COLORS array for different gradient styles
• Card layout: Adjust CSS grid properties in style.css
• Data fields: Add columns in Supabase and update the card template in script.js

License

This project is open source — feel free to use and modify.