Portfolio Site with GitHub API

A modern portfolio website that dynamically displays GitHub repositories and projects using the GitHub API. This site showcases my development work and provides an interactive way to explore my projects.

• About the Project
• Getting Started
• Prerequisites
• Installation
• Configuration
• Project Structure
• Technologies Used
• Features
• API Reference
• Development
• Deployment
• License

This portfolio website is designed to showcase my development projects and GitHub repositories in a clean, modern interface. The site dynamically fetches data from the GitHub API to display up-to-date information about my repositories, including names, descriptions, programming languages, and star counts.

The website is built with modern web technologies and follows responsive design principles to ensure optimal viewing experience across all devices, from desktop computers to mobile phones.

To run this project locally, follow these steps:

1. Clone the repository
2. Install dependencies
3. Configure the GitHub API
4. Start the development server

Before you begin, ensure you have the following installed on your system:

• Node.js (v14.0.0 or higher)
• npm (v6.0.0 or higher)
• Git (for cloning the repository)
• A GitHub account (for API access)

1. Clone the repository:

   git clone https://github.com/your-username/your-repository.git
   cd your-repository

2. Open the project:

   open index.html

1. Update GitHub username: Open script.js and replace 'username' with your actual GitHub username:

   const GITHUB_USERNAME = 'username'; // Replace with your GitHub username
   const USE_PUBLIC_API = true; // Set to true to use public API (60 requests/hour)

2. Netlify Functions:

   • For production deployment on Netlify, use serverless functions
   • Create a Netlify function to handle GitHub API calls securely
   • Add your GitHub token to Netlify environment variables
   • No client-side token exposure

3. Local Development:

   • For local development, you can still use environment variables
   • Add your GitHub token to your .zshenv file:

     export GITHUB_TOKEN=your_token_here

   • Reload your shell: source ~/.zshenv

portfolio-site/
├── src/
│   ├── components/     # React components
│   ├── styles/        # CSS stylesheets
│   ├── utils/         # Utility functions
│   └── api/           # API integration code
├── public/            # Static assets
├── tests/             # Test files
├── .env.example       # Environment variables template
├── package.json       # Dependencies and scripts
└── README.md          # This file

• HTML5: Semantic markup for content structure
• CSS3: Modern styling with Flexbox and Grid layouts
• JavaScript (ES6+): Modern JavaScript features for better code organization
• GitHub API: RESTful API for fetching repository data
• Git: Version control system

• Dynamic Repository Display: Automatically fetches and displays GitHub repositories
• Responsive Design: Optimized for desktop, tablet, and mobile devices
• Modern UI: Clean, minimalist design with smooth animations
• Search Functionality: Filter repositories by name or description
• Language Detection: Shows programming languages used in each repository
• Star Count Display: Shows repository popularity with star counts
• Build-time Data with Runtime Updates: Static data generated at build time, with runtime timestamp checking for efficient updates
• Repository Screenshots: Automatic screenshot matching during runtime updates with flexible naming patterns
• SEO Optimized: Semantic HTML and meta tags for better search engine visibility
• Fast Loading: Optimized assets and lazy loading for better performance
• Build-time Processing: Screenshot matching happens at deployment, not runtime

• GET /users/{username}/repos - Fetch user repositories
• GET /repos/{owner}/{repo} - Get repository details
• GET /repos/{owner}/{repo}/languages - Get repository languages

• Unauthenticated requests: 60 requests per hour
• Authenticated requests: 5,000 requests per hour

• Build-time Data Generation: Static data is generated at build time using GitHub API
• Runtime Timestamp Checking: On page reload, the application checks if any repositories have been updated by comparing timestamps
• Efficient Updates: Only repositories that have changed since the last build are updated at runtime
• Repository Screenshots: Screenshots are extracted from README content during runtime updates for optimal performance

The Challenge: Netlify's serverless functions run in a read-only environment where the file system structure at runtime differs from the build environment. The public/data/repos.json file generated during build is not accessible to functions at runtime.

The Solution: Use embedded data - the build process (build-data.js) generates netlify/functions/embedded-data.js which contains the static repository data as a JavaScript module. This file is bundled with the function code and is always available at runtime.

Implementation Details:

// At the top of get-repos.js, embedded data is loaded at module initialization
let EMBEDDED_DATA = null;
try {
  EMBEDDED_DATA = require('./embedded-data.js');
} catch (error) {
  console.warn('Embedded data not available:', error.message);
}

// In check mode, use embedded data directly (not file system)
let staticData = EMBEDDED_DATA;

Key Insight: Without embedded data, the check mode cannot compare current GitHub data against the last known state, forcing a full fetch every time. Embedded data enables efficient differential updates by providing the baseline for comparison.

1. Open the project:

   open index.html

2. View your portfolio: The site will display your GitHub repositories using static data generated at build time. On page reload, the application checks for updates by comparing repository timestamps and updates only the repositories that have changed.

1. Install Netlify CLI:

   npm install -g netlify-cli

2. Login to Netlify:

   netlify login

3. Link to Netlify site:

   netlify link

4. Start development server:

   netlify dev

5. View your portfolio: The site will automatically fetch and display your GitHub repositories using authenticated API (5,000 requests/hour)

This project follows standard JavaScript conventions with ESLint and Prettier for code consistency.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

1. Connect to Netlify:

   • Log in to Netlify
   • Click "New site from Git"
   • Select your repository

2. Configure Build Settings:

   • Build command: npm run build
   • Publish directory: build/

3. Environment Variables:

   • Add GitHub token in Netlify UI
   • Save and deploy

4. Custom Domain (Optional):

   • Add your custom domain
   • Configure DNS settings

This project is licensed under the MIT License - see the LICENSE file for details.

For support or questions about this project, please:

• Open an issue in the repository
• Contact me directly via email

Last Updated: February 2026