GitCard is a sleek, interactive web application that generates a beautiful, shareable card summarizing your GitHub profile. It's built with modern web technologies and features fluid animations to present your stats in an engaging way ;)
FOLLOW DEVLOGS AT: https://veigatec.rf.gd/project/gitcard/
GitCard Logo
Day 1 is all about designing, the wireframes.
GitCard Wireframe Design
Day 2 has been bringing the logic to life. I created a simple util, Github.ts, that fetches data from Github API. Then it calculates stars, repos and all what is required for this app.
GitCard Logic
Day 3 has been about the visuals. I used lucide for icons and framer-motion for animations. This is where now the application starts breathing, the existenceness ;)
Below are four cards or cheshire137 (Sarah Vessels):
Gitcard - cheshire137 profile |
Gitcard - cheshire137 the tech |
Gitcard - cheshire137 the grind |
Gitcard - cheshire137 hall of fame |
- Dynamic Profile Data: Fetches your GitHub profile information in real-time.
- Repo Insights: Calculates and displays your most used languages and your most starred repository.
- Interactive View: A multi-pane card with smooth, custom slide animations to navigate between different stats.
- Modern UI: A clean, visually appealing design built with Tailwind CSS.
- Framework: Next.js (v16 App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Animations: Framer Motion
- Icons: Lucide React
Follow these instructions to get a local copy of the project up and running.
- Node.js (v20 or later recommended)
- npm, yarn, or your favorite package manager
- Clone the repository:
git clone https://github.com/Valent-p/gitcard.git
cd gitcard- Install dependencies:
npm install- Run the development server:
npm run dev- Open the application: Open http://localhost:3000 in your browser to see the result.
This project uses the public GitHub API to fetch profile data. Unauthenticated requests are subject to a rate limit of 60 requests per hour per IP address. For personal use and development, this is generally sufficient.