Friday - Personal Portfolio

A modern, feature-rich portfolio website built with Next.js 15, showcasing projects, skills, and real-time development statistics from GitHub and WakaTime.

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Styling: TailwindCSS 4 + Radix UI
• Charts: ECharts for data visualization
• Icons: Lucide Icons + React Icons
• API Integration: GitHub Contributions API + WakaTime API
• Package Manager: pnpm

Project Structure

friday/
├── app/                      # Next.js app directory
│   ├── api/                  # API routes
│   │   └── wakatime/         # WakaTime integration endpoints
│   ├── config/               # Configuration files
│   │   ├── achievement.ts    # Achievements data
│   │   ├── experience.ts     # Work experience data
│   │   ├── projects.ts       # Project portfolio data
│   │   ├── techStack.ts      # Technology stack data
│   │   └── socials.ts        # Social links
│   ├── siteComponents/       # Main site components
│   └── Statistics/           # Statistics components (GitHub & WakaTime)
├── components/               # Reusable UI components
│   ├── kibo-ui/             # Custom UI components
│   └── ui/                   # shadcn/ui components
├── types/                    # TypeScript type definitions
└── public/                   # Static assets

Getting Started

Prerequisites

• Node.js 18+ or Bun
• pnpm (recommended) or npm/yarn

Installation

1. Clone the repository:

git clone https://github.com/agayushh/Friday.git
cd Friday

2. Install dependencies:

pnpm install
# or
npm install
# or
yarn install

3. Set up environment variables:

Create a .env file in the root directory:

cp .env.example .env

Update the .env file with your credentials:

# Base URL for API calls
NEXT_PUBLIC_BASE_URL=http://localhost:3000

# WakaTime API Key (get from https://wakatime.com/settings/api-key)
WAKATIME_API_KEY=your_wakatime_api_key_here

4. Run the development server:

pnpm dev
# or
npm run dev
# or
yarn dev

5. Open your browser:

Visit http://localhost:3000 to see your portfolio!

Customization

Update Personal Information

Edit the configuration files in app/config/:

• info.ts - GitHub username and basic info
• personInfo.ts - Personal details, email, contact
• experience.ts - Work experience and education
• projects.ts - Project showcase
• techStack.ts - Skills and technologies
• achievement.ts - Awards and achievements
• socials.ts - Social media links

Modify Styling

• Update app/globals.css for global styles
• Customize Tailwind config in postcss.config.mjs
• Modify component styles directly in TSX files

API Endpoints

WakaTime Stats

• GET /api/wakatime/stats - Fetch coding statistics
• GET /api/wakatime/summaries - Fetch daily summaries

Note: Data is cached for 1 hour (3600 seconds) using Next.js ISR

Building for Production

# Build the application
pnpm build

# Start production server
pnpm start

Deployment

Deploy on Vercel (Recommended)

1. Push your code to GitHub
2. Import your repository on Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

This is a standard Next.js app and can be deployed to:

• Netlify - Guide
• AWS Amplify - Guide
• Docker - Build your own container
• Self-hosted - Using pnpm start after building

Security

• ✅ All API keys stored in environment variables
• ✅ .env files excluded from git
• ✅ Server-side API routes for sensitive operations
• ✅ No hardcoded credentials

Contributing

Contributions, issues, and feature requests are welcome!

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

👤 Author

Ayush Agarwal

• Website: agayush.me
• Email: agayush088@gmail.com
• GitHub: @agayushh
• Currently: Building Oclea

Acknowledgments

• Next.js - The React Framework
• Vercel - Deployment platform
• WakaTime - Coding statistics
• GitHub - Contribution tracking
• shadcn/ui - UI components

---

⭐ Star this repo if you find it helpful!