A modern developer portfolio built with Next.js, featuring real-time coding activity tracking powered by CodeTime.
- Real-time Coding Activity: Track coding sessions, languages, and productivity metrics
- CodeTime Integration: Display coding statistics, total hours, and language breakdown
- Interactive Dashboard: Visual representation of coding patterns and preferences
- Responsive Design: Optimized for desktop and mobile devices
- Dark/Light Mode: Theme switching with system preference detection
This portfolio integrates with CodeTime to provide real-time insights into coding activity:
- Total Coding Time: Displays cumulative coding hours across all projects
- Language Statistics: Shows the most used programming languages with time breakdown
- Project/Workspace Tracking: Monitors time spent on different projects
- Platform Analytics: Tracks coding activity across different operating systems
- Live Badge: Real-time CodeTime badge showing current coding activity
The integration uses CodeTime's v3 API with authenticated endpoints to ensure accurate and personalized data display.
- NextJS 14 - Next.js is a React framework for building full-stack web applications, in this site i use App Router.
- TailwindCSS - A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup.
- Shadcn UI - Beautifully designed components built with Radix UI and Tailwind CSS.
- Clone the repository
git clone https://github.com/bforbilly24/bforbilly.git
cd bforbilly- Install dependencies
bun install
# or
npm install- Set up environment variables
cp .env.example .envAdd your CodeTime API token to .env:
CODETIME_API_TOKEN=your_codetime_api_token_here
CODETIME_API_BASE_URL="https://api.codetime.dev/v3"To get your CodeTime API token:
-
Visit CodeTime
-
Sign up/Sign in with your GitHub account
-
Go to your dashboard and generate an API token
-
Start the development server
bun dev
# or
npm run devThe application will be available at http://localhost:3000.