Skip to content

README.md

Latest commit

 

History

History
180 lines (135 loc) · 7.45 KB

README.md

File metadata and controls

180 lines (135 loc) · 7.45 KB
Raw
GlassHub Widget

☄️ GlassHub Quasar

Free and source-available service to generate dynamic SVG widgets and embeddable URLs for GitHub profiles following the Glassmorphism visual identity.

Deploy with Vercel

License Proprietary Next.js TypeScript Edge Ready

📖 Comprehensive Documentation (docs/)

For in-depth guides, architecture breakdowns, and step-by-step instructions written in simple, accessible language for all developer levels:

✨ Visual Identity & Glassmorphism Aesthetics

GlassHub Quasar strictly enforces the modern, cosmic Glassmorphism visual language:

  • 🌌 Translucent Backings: Frosted dark finish (rgba(15, 23, 42, 0.75)).
  • ⚡ Neon Gradient Borders: Neon Cyan (#06B6D4) and Cobalt Blue (#1D4ED8).
  • 💎 Specular Light Reflections: Glass shine highlights & soft drop shadows (box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37)).
  • 🌓 Native Dark/Light Mode: Automatic theme adaptation on GitHub via @media (prefers-color-scheme: light/dark) embedded directly inside SVGs.
  • 🚀 Zero Cold Start: Optimized to run on serverless edge functions via Vercel or Cloudflare Pages.
  • 🛡️ Optimized Camo Caching: Headers Cache-Control: public, max-age=1800, s-maxage=3600, stale-while-revalidate=86400 for high performance with GitHub Camo.

🚀 Free 1-Click Deploy (Vercel)

Deploy your own instance of GlassHub Quasar for free in less than a minute:

Deploy with Vercel

Environment Variables (Optional)

To increase GitHub API rate limits from 60 req/h to 5,000 req/h, configure your personal access token:

GITHUB_TOKEN=ghp_your_personal_access_token_here

📚 Modules & API Endpoints

1. /api/stats — GitHub Profile Metrics

![GitHub Stats](https://glasshub-quasar.vercel.app/api/stats?username=matheustheus27&theme=glass-dark)

2. /api/top-langs — Most Used Languages

![Top Languages](https://glasshub-quasar.vercel.app/api/top-langs?username=matheustheus27&layout=bars&theme=glass-dark)

3. /api/streak — Contribution Activity Streak

![Contribution Streak](https://glasshub-quasar.vercel.app/api/streak?username=matheustheus27&theme=glass-dark&glow=true)

4. /api/repo — Pinned Repository Card

![Pinned Repo](https://glasshub-quasar.vercel.app/api/repo?username=matheustheus27&repo=GlassHubQuasar&theme=glass-dark)

5. /api/wakatime — WakaTime Coding Hours

![WakaTime Stats](https://glasshub-quasar.vercel.app/api/wakatime?username=octocat&theme=glass-dark)

6. /api/quote — Daily Dev Quote

![Dev Quote](https://glasshub-quasar.vercel.app/api/quote?theme=glass-dark)

7. /api/badge — Glassmorphic Badges & Buttons

[![React](https://glasshub-quasar.vercel.app/api/badge?label=React&value=v18.3&icon=react&theme=glass-dark&glow=true)](https://react.dev)

8. /api/image-filter — Glass Frames & Infinite Neon Borders

![My Photo](https://glasshub-quasar.vercel.app/api/image-filter?url=https://example.com/photo.jpg&effect=infinite-border&radius=18)

9. /api/card — Dynamic Text & Highlight Cards

![Bio Card](https://glasshub-quasar.vercel.app/api/card?title=Fullstack+Engineer&description=Building+the+future+with+Next.js+and+TypeScript&tag=BIO&icon=sparkles)

10. /api/table — Architecture & Tech Stack Tables

![Tech Stack Table](https://glasshub-quasar.vercel.app/api/table?title=Tech+Stack&columns=Layer,Technology,Status&rows=Frontend,Next.js+14,Production;Engine,Dynamic+SVG,Active)

11. /api/logo — Official Vector Logo

![GlassHub Logo](https://glasshub-quasar.vercel.app/api/logo?animated=true&theme=glass-dark)

12. /api/icon — Dynamic Glass Icon & Monogram Card

![Dynamic Icon](https://glasshub-quasar.vercel.app/api/icon?initials=GH&label=GlassHub&theme=glass-dark&shape=circle&animated=true)

13. /api/title — Glassmorphic Title & Header Banners

![Profile Title](https://glasshub-quasar.vercel.app/api/title?title=Matheus+Ferreira&subtitle=Fullstack+Engineer&icon=sparkles&theme=glass-dark&preset=glass-banner&animated=true)

14. /api/socials — Glassmorphic Socials & Contact Connect Bar

![Socials Connect Bar](https://glasshub-quasar.vercel.app/api/socials?github=matheustheus27&linkedin=matheustheus27&website=glasshub.dev&theme=glass-dark&animated=true)

15. /api/tech-stack — Interactive Tech Stack & Skill Matrix Grid

![Tech Stack Grid](https://glasshub-quasar.vercel.app/api/tech-stack?title=Tech+Stack&skills=nextjs,react,typescript,python,docker,postgresql,tailwind,rust&theme=glass-dark&animated=true)

16. /api/activity-graph — 30-Day Glassmorphism Contribution Bar Graph

![Activity Graph](https://glasshub-quasar.vercel.app/api/activity-graph?username=matheustheus27&theme=glass-dark&animated=true)

🛠️ Local Development

  1. Clone the repository:

    git clone https://github.com/matheustheus27/GlassHubQuasar.git
cd GlassHubQuasar

  2. Install dependencies:

    npm install

  3. Start the development server:

    npm run dev

  4. Open http://localhost:3000 in your browser to access the Playground SPA.

📄 License

Distributed under a Proprietary, Source-Available, Non-Commercial License. See LICENSE for full terms and legal conditions.