Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/camiloerazo/dynamic-github-portfolio

This is the portfolio you are in right now. I coded this from scratch and it uses the Github API to automatically get my repos. I select which one to showcase and it fetches Images from another API. Includes detailed documentation. Built with api-rest, dynamical-systems, githubapi, nextjs, react, and TypeScript.
https://github.com/camiloerazo/dynamic-github-portfolio

api-rest dynamical-systems githubapi imageapi nextjs react

Last synced: 4 months ago
JSON representation

This is the portfolio you are in right now. I coded this from scratch and it uses the Github API to automatically get my repos. I select which one to showcase and it fetches Images from another API. Includes detailed documentation. Built with api-rest, dynamical-systems, githubapi, nextjs, react, and TypeScript.

Awesome Lists containing this project

README 

          
# Dynamic GitHub Portfolio Engine 🚀



A modern, full-stack portfolio platform that automatically showcases your GitHub projects with AI-enhanced features and real-time updates. Built with cutting-edge technologies and best practices in mind.



![Next.js](https://img.shields.io/badge/Next.js-13.4+-black?style=for-the-badge&logo=next.js)

![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-blue?style=for-the-badge&logo=typescript)

![Tailwind CSS](https://img.shields.io/badge/Tailwind_CSS-3.4+-38B2AC?style=for-the-badge&logo=tailwind-css)

![React](https://img.shields.io/badge/React-18.3+-61DAFB?style=for-the-badge&logo=react)

![Vercel](https://img.shields.io/badge/Deployed_on-Vercel-black?style=for-the-badge&logo=vercel)



## 🌟 Key Features



### 🎯 Core Functionality

- **Real-time GitHub Integration**: Automatically fetches and updates project data directly from your GitHub repositories

- **AI-Powered Project Analysis**: Intelligent analysis of repository content to generate meaningful project summaries

- **Dynamic Content Management**: Automatic updates when you push new changes to your repositories

- **Smart Image Generation**: AI-driven image selection based on project context and technologies



### 🛠️ Technical Capabilities

- **Advanced Data Processing**: Sophisticated analysis of repository metadata, READMEs, and code files

- **Intelligent Content Generation**: Automated project summaries and feature extraction

- **Real-time Updates**: Instant synchronization with GitHub repository changes

- **Responsive Architecture**: Built with scalability and performance in mind



### 🎨 User Experience

- **Modern UI/UX**: Clean, responsive design using Tailwind CSS and Shadcn UI

- **Interactive Project Showcase**: Dynamic filtering and sorting of projects

- **Admin Dashboard**: Secure project management interface

- **Cross-device Compatibility**: Fully responsive design for all screen sizes



## 🏗️ Technical Stack



### Frontend Architecture

- **Framework**: [Next.js 13.4+](https://nextjs.org/) with App Router

- **Language**: [TypeScript 5.0+](https://www.typescriptlang.org/)

- **UI Components**: 

  - [Shadcn UI](https://ui.shadcn.com/) for modern, accessible components

  - [Tailwind CSS 3.4+](https://tailwindcss.com/) for utility-first styling

- **State Management**: React Hooks and Context API

- **Form Handling**: React Hook Form with Zod validation



### Backend Architecture

- **Runtime**: [Node.js](https://nodejs.org/) with Next.js API Routes

- **API Integration**:

  - [GitHub REST API](https://docs.github.com/en/rest) for repository data

  - [Unsplash API](https://unsplash.com/developers) for dynamic imagery

- **Data Processing**: Custom algorithms for repository analysis

- **Authentication**: Secure admin panel with password protection



### Development Tools & Practices

- **Code Quality**:

  - TypeScript for type safety

  - ESLint for code linting

  - Prettier for code formatting

- **Performance Optimization**:

  - Server-side rendering (SSR)

  - Static site generation (SSG)

  - Image optimization

- **Security**:

  - Environment variable management

  - API key protection

  - Secure authentication



## 🚀 Advanced Features



### Smart Project Analysis

- Automated extraction of project metadata

- Intelligent README parsing and summarization

- Technology stack detection

- Code complexity analysis

- Feature extraction from repository content



### Dynamic Content Management

- Real-time GitHub repository synchronization

- Automated project categorization

- Smart image selection based on project context

- Featured project management system

- Tag-based project filtering



### Performance Optimizations

- Efficient data fetching with caching

- Optimized image loading and processing

- Lazy loading of components

- Responsive image handling

- Client-side state persistence



## 🛠️ Setup and Installation



### Prerequisites

- Node.js 18.0 or higher

- npm or yarn package manager

- GitHub account with public repositories

- Unsplash API access



### Installation Steps

1. Clone the repository:

   ```bash

   git clone https://github.com/yourusername/dynamic-github-portfolio.git

   cd dynamic-github-portfolio

   ```



2. Install dependencies:

   ```bash

   npm install

   # or

   yarn install

   ```



3. Configure environment variables:

   Create a `.env.local` file with:

   ```env

   GITHUB_TOKEN=your_github_token_here

   UNSPLASH_ACCESS_KEY=your_unsplash_access_key_here

   ```



4. Start the development server:

   ```bash

   npm run dev

   # or

   yarn dev

   ```



### Environment Variables

| Variable | Description | Required |

|----------|-------------|----------|

| `GITHUB_TOKEN` | GitHub Personal Access Token with `public_repo` scope | Yes |

| `UNSPLASH_ACCESS_KEY` | Unsplash API access key | Yes |



## 🔒 Security Features



- Secure API key management

- Protected admin routes

- Environment variable protection

- GitHub token security

- Client-side data validation



## 🎯 Performance Metrics



- Lighthouse score optimization

- Core Web Vitals compliance

- Responsive design optimization

- Image loading optimization

- API response caching



## 🤝 Contributing



We welcome contributions! Please see our [Contributing Guidelines](CONTRIBUTING.md) for details.



1. Fork the repository

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 licensed under the MIT License - see the [LICENSE](LICENSE) file for details.



## 🙏 Acknowledgments



- [Next.js](https://nextjs.org/) for the amazing framework

- [Tailwind CSS](https://tailwindcss.com/) for the utility-first CSS framework

- [Shadcn UI](https://ui.shadcn.com/) for the beautiful components

- [GitHub API](https://docs.github.com/en/rest) for repository data

- [Unsplash](https://unsplash.com/developers) for the image API



---



Built with ❤️ using modern web technologies. Feel free to star ⭐ this repository if you find it useful!