Skip to content

Commit fa16d5e

Browse files
pphatdevpphatdev
committed
feat: add GitHub Stats Studio project documentation
1 parent bdcf14c commit fa16d5e

1 file changed

Lines changed: 242 additions & 0 deletions

File tree

‎content/projects/studio/index.mdx‎

Lines changed: 242 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,242 @@
1+
---
2+
title: "GitHub Stats Studio"
3+
slug: "studio"
4+
description: "A beautiful visual editor for creating stunning GitHub statistics cards with real-time preview and customization options."
5+
image: "https://pphat.me/assets/projects/studio.pphat.top/cover.webp"
6+
tags: ["GitHub Stats", "Visual Editor", "Web App"]
7+
languages: ["Nuxt.js", "Vue.js", "TypeScript", "TailwindCss"]
8+
source:
9+
-
10+
name: "source"
11+
type: "source"
12+
url: "https://github.com/pphatdev/studio"
13+
-
14+
name: "demo"
15+
type: "demo"
16+
url: "https://studio.pphat.top"
17+
18+
authors:
19+
-
20+
name: "PPhat Dev"
21+
profile: "https://github.com/pphatdev.png"
22+
url: "https://github.com/pphatdev"
23+
24+
published: true
25+
createdAt: "2026-03-15T10:12:15.648Z"
26+
---
27+
28+
# ✨ **Stats Gallery**
29+
30+
<div class="blog-gallery" data-layout="snap" data-captions="true">
31+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=default&data_border_style=frame" alt="Demo Template" className=""/>
32+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=radical&data_border_style=frame" alt="Demo Template" className=""/>
33+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=cobalt&data_border_style=frame" alt="Demo Template" className=""/>
34+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=synthwave&data_border_style=frame" alt="Demo Template" className=""/>
35+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=monokai&data_border_style=frame" alt="Demo Template" className=""/>
36+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=radar&data_border_style=frame" alt="Demo Template" className=""/>
37+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=shades-of-purple&data_border_style=frame" alt="Demo Template" className=""/>
38+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=buefy-dark&data_border_style=frame" alt="Demo Template" className=""/>
39+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=maroongold&data_border_style=frame" alt="Demo Template" className=""/>
40+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=panda&data_border_style=frame" alt="Demo Template" className=""/>
41+
<img src="http://stats.pphat.top/stats?username=pphatdev&avatar_mode=radar&theme=codeSTACKr&data_border_style=frame" alt="Demo Template" className=""/>
42+
</div>
43+
44+
# ✨ **Languages**
45+
46+
<div class="blog-gallery" data-layout="snap" data-captions="true">
47+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=default" alt="Demo Template" className=""/>
48+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=vue" alt="Demo Template" className=""/>
49+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=shades-of-purple" alt="Demo Template" className=""/>
50+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=buefy-dark" alt="Demo Template" className=""/>
51+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=blue-green" alt="Demo Template" className=""/>
52+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=algolia" alt="Demo Template" className=""/>
53+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=great-gatsby" alt="Demo Template" className=""/>
54+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=nord" alt="Demo Template" className=""/>
55+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=ayu-mirage" alt="Demo Template" className=""/>
56+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=midnight-purple" alt="Demo Template" className=""/>
57+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=jolly" alt="Demo Template" className=""/>
58+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=kacho_ga" alt="Demo Template" className=""/>
59+
<img src="http://stats.pphat.top/languages?username=pphatdev&type=card&show_info=true&theme=rose_pine" alt="Demo Template" className=""/>
60+
</div>
61+
62+
63+
# ✨ **About Project**
64+
65+
GitHub Stats Studio is a beautiful visual editor for creating stunning GitHub statistics cards with real-time preview and customization options.
66+
This modern web application empowers developers to craft personalized GitHub profile stats cards without writing a single line of code.
67+
The intuitive interface provides instant visual feedback, allowing users to experiment with various templates, themes, and customization options to create the perfect stats card for their GitHub profile.
68+
Built with Nuxt 4 and Vue 3, it delivers a seamless user experience with smooth animations, zoom controls, and one-click URL generation for immediate integration into GitHub README files.
69+
70+
# 🛠️ **Project Tech Stack**
71+
72+
- **Core:**
73+
- Nuxt.js `v4.1.3`
74+
- Vue `v3.5.28`
75+
- TypeScript `v5.0`
76+
77+
- **UI & Styling:**
78+
- TailwindCSS `v4.2.0`
79+
- Custom Icon Components
80+
- Responsive Design
81+
82+
- **Features & Utilities:**
83+
- Canvas Confetti (Celebrations)
84+
- Real-time Preview
85+
- URL Generation
86+
- Zoom & Pan Controls
87+
88+
- **Development:**
89+
- Prettier
90+
- PM2 (Ecosystem Config)
91+
- ESLint
92+
93+
# 🌈 **Project Features**
94+
95+
- 🎨 **Visual Editor** - Intuitive interface for customizing GitHub stats cards
96+
- 👁️ **Real-time Preview** - See your changes instantly with live preview
97+
- 🖼️ **Multiple Templates** - Choose from various pre-designed templates
98+
- ⚡ **Customizable Options** - Fine-tune every aspect of your stats card
99+
- 🔍 **Zoom Controls** - Zoom in/out and pan for detailed preview
100+
- 📋 **One-click Copy** - Copy generated URLs with a single click
101+
- 🎉 **Delightful UX** - Smooth animations and confetti celebrations
102+
- 📱 **Responsive Design** - Works seamlessly on all devices
103+
- 🎨 **Theme System** - Multiple beautiful themes to choose from
104+
- 🔧 **Border Styles** - Customize borders, frames, and decorative elements
105+
106+
# 💻 **Installation & Setup**
107+
108+
## Prerequisites
109+
110+
- Node.js 18.x or higher
111+
- npm, pnpm, yarn, or bun
112+
113+
## Installation
114+
115+
1. Clone the repository:
116+
```bash
117+
git clone https://github.com/pphatdev/studio.git
118+
cd studio
119+
```
120+
121+
2. Install dependencies:
122+
```bash
123+
# npm
124+
npm install
125+
126+
# pnpm
127+
pnpm install
128+
129+
# yarn
130+
yarn install
131+
132+
# bun
133+
bun install
134+
```
135+
136+
## Development Server
137+
138+
Start the development server on `http://localhost:3000`:
139+
140+
```bash
141+
# npm
142+
npm run dev
143+
144+
# pnpm
145+
pnpm dev
146+
147+
# yarn
148+
yarn dev
149+
150+
# bun
151+
bun run dev
152+
```
153+
154+
## Production Build
155+
156+
Build the application for production:
157+
158+
```bash
159+
# npm
160+
npm run build
161+
162+
# pnpm
163+
pnpm build
164+
165+
# yarn
166+
yarn build
167+
168+
# bun
169+
bun run build
170+
```
171+
172+
Locally preview production build:
173+
174+
```bash
175+
# npm
176+
npm run preview
177+
178+
# pnpm
179+
pnpm preview
180+
181+
# yarn
182+
yarn preview
183+
184+
# bun
185+
bun run preview
186+
```
187+
188+
# 📁 **Project Structure**
189+
190+
```
191+
studio.pphat.top/
192+
├── app/
193+
│ ├── assets/
194+
│ │ └── css/ # Global styles
195+
│ ├── components/
196+
│ │ ├── icons/ # Icon components
197+
│ │ ├── sidebar/ # Sidebar components
198+
│ │ └── studio/ # Studio preview components
199+
│ ├── composables/
200+
│ │ └── useStats.ts # Stats management composable
201+
│ ├── pages/
202+
│ │ └── index.vue # Main studio page
203+
│ └── utils/
204+
│ ├── data.json # Configuration and templates
205+
│ ├── themes.ts # Theme definitions
206+
│ └── utils.ts # Utility functions
207+
├── public/ # Static assets
208+
├── nuxt.config.ts # Nuxt configuration
209+
└── package.json # Project dependencies
210+
```
211+
212+
# 📝 **Available Scripts**
213+
214+
- `npm run dev` - Start development server
215+
- `npm run build` - Build for production
216+
- `npm run generate` - Generate static site
217+
- `npm run preview` - Preview production build
218+
- `npm run prettier` - Format code with Prettier
219+
220+
# 🎯 **How It Works**
221+
222+
GitHub Stats Studio provides a visual interface to customize GitHub stats cards:
223+
224+
1. **Enter Username** - Input your GitHub username
225+
2. **Choose Template** - Select from pre-designed templates (Stats, Default, Radar, etc.)
226+
3. **Customize Options** - Adjust colors, themes, borders, and visibility
227+
4. **Real-time Preview** - See instant updates with zoom and pan controls
228+
5. **Generate URL** - Copy the generated URL for your GitHub README
229+
6. **Celebrate** - Enjoy delightful confetti animations on success
230+
231+
# 🙏 **Acknowledgments**
232+
233+
- Built with Vue and Nuxt
234+
- Styled with Tailwind CSS
235+
- Icons and UI components custom-designed
236+
- Powered by GitHub Stats API at [stats.pphat.top](https://stats.pphat.top)
237+
238+
---
239+
240+
**Demo:** [studio.pphat.top](https://studio.pphat.top)
241+
**API:** [stats.pphat.top](https://stats.pphat.top)
242+
**GitHub:** [pphatdev/studio](https://github.com/pphatdev/studio)

0 commit comments

Comments
 (0)