Skip to content

Projects Static Dynamic

Jump to bottom
Krishna GSVV edited this page Sep 24, 2025 · 1 revision

Projects: Static vs Dynamic vs Hybrid Modes

Table of Contents

Quick Reference Table

Key Type Description
mode string 'static', 'github', 'hybrid'
staticProjects array Manually curated projects
github object GitHub API configuration
ignore array Repositories to exclude
maxProjects number Maximum projects to display
sortBy string Sorting criteria
sortOrder string Sort direction
showForks boolean Include forked repositories
showPrivate boolean Include private repositories
mergeStrategy string Hybrid mode merge strategy
... ... See below for all sub-keys and options

All configuration is managed under the projects key in your settings.json file.

🏗️ Project System Architecture

graph TB
    subgraph "Configuration Layer"
        Settings[settings.json]
        Mode[projects.mode]
        GitHubConfig[GitHub Config]
        StaticConfig[Static Projects]
    end

    subgraph "Data Sources"
        GitHub[GitHub API]
        Static[Static Projects Array]
        Hybrid[Hybrid Merge Logic]
    end

    subgraph "Processing Pipeline"
        Fetch[Data Fetching]
        Transform[Data Transformation]
        Merge[Data Merging]
        Filter[Filtering & Sorting]
        Display[Final Display]
    end

    subgraph "Display Modes"
        GitHubMode[GitHub Mode]
        StaticMode[Static Mode]
        HybridMode[Hybrid Mode]
    end

    Settings --> Mode
    Settings --> GitHubConfig
    Settings --> StaticConfig

    Mode --> GitHubMode
    Mode --> StaticMode
    Mode --> HybridMode

    GitHubMode --> GitHub
    StaticMode --> Static
    HybridMode --> GitHub
    HybridMode --> Static
    HybridMode --> Hybrid

    GitHub --> Fetch
    Static --> Transform
    Hybrid --> Merge

    Fetch --> Filter
    Transform --> Filter
    Merge --> Filter
    Filter --> Display

    classDef config fill:#3b82f6,stroke:#1e40af,color:#fff
    classDef source fill:#10b981,stroke:#059669,color:#fff
    classDef process fill:#8b5cf6,stroke:#7c3aed,color:#fff
    classDef mode fill:#f59e0b,stroke:#d97706,color:#fff

    class Settings,Mode,GitHubConfig,StaticConfig config
    class GitHub,Static,Hybrid source
    class Fetch,Transform,Merge,Filter,Display process
    class GitHubMode,StaticMode,HybridMode mode
Loading

🔄 Project Mode Comparison

graph LR
    subgraph "GitHub Mode"
        G1[Fetch from GitHub API]
        G2[Apply Filters]
        G3[Display Dynamic Projects]
    end

    subgraph "Static Mode"
        S1[Load from settings.json]
        S2[Transform Data Format]
        S3[Display Static Projects]
    end

    subgraph "Hybrid Mode"
        H1[Fetch GitHub Data]
        H2[Load Static Projects]
        H3[Smart Merge Logic]
        H4[Enhanced Display]
    end

    G1 --> G2 --> G3
    S1 --> S2 --> S3
    H1 --> H3
    H2 --> H3
    H3 --> H4

    classDef github fill:#10b981,stroke:#059669,color:#fff
    classDef static fill:#3b82f6,stroke:#1e40af,color:#fff
    classDef hybrid fill:#8b5cf6,stroke:#7c3aed,color:#fff

    class G1,G2,G3 github
    class S1,S2,S3 static
    class H1,H2,H3,H4 hybrid
Loading

📊 Data Flow Detailed Diagram

sequenceDiagram
    participant User
    participant App
    participant Settings
    participant GitHub
    participant Transform
    participant Display

    User->>App: Navigate to Projects
    App->>Settings: Load configuration
    Settings-->>App: Return project mode & config

    alt GitHub Mode
        App->>GitHub: Fetch repositories
        GitHub-->>App: Return repository data
        App->>Transform: Convert GitHub format
        Transform-->>App: Standardized project data
    else Static Mode
        App->>Settings: Load static projects
        Settings-->>App: Static project array
        App->>Transform: Convert static format
        Transform-->>App: Standardized project data
    else Hybrid Mode
        par
            App->>GitHub: Fetch repositories
            GitHub-->>App: GitHub data
        and
            App->>Settings: Load static projects
            Settings-->>App: Static data
        end
        App->>Transform: Merge & enhance data
        Transform-->>App: Enhanced project data
    end

    App->>Display: Render projects
    Display-->>User: Show project grid
Loading

🎯 Mode Selection Guide

Mode Best For Pros Cons
GitHub Developers with active GitHub ✅ Always up-to-date
✅ No manual maintenance
✅ Rich metadata		 ❌ Limited customization
❌ Requires internet
❌ API rate limits
Static Full control over content ✅ Complete customization
✅ Works offline
✅ Stable content		 ❌ Manual updates required
❌ No GitHub integration
❌ More maintenance
Hybrid Best of both worlds ✅ GitHub convenience
✅ Custom enhancements
✅ Intelligent merging		 ❌ More complex setup
❌ Potential conflicts
❌ Higher maintenance

How It Works

1. Data Source

  • The component now fetches data from /public/settings.json
  • It reads the projects.staticProjects array from the settings file
  • If the settings can't be loaded, it shows an error message

2. Data Transformation

The component automatically converts the settings.json project format to the expected display format:

// Settings.json format
{
  "id": 1,
  "name": "E-Commerce Platform",
  "description": "A full-stack e-commerce application...",
  "technologies": ["React", "Node.js", "MongoDB"],
  "githubUrl": "https://github.com/...",
  "liveUrl": "https://...",
  "stats": { "stars": 24, "forks": 8 }
}

Gets converted to:

// Display format
{
  "id": 1,
  "name": "E-Commerce Platform",
  "description": "A full-stack e-commerce application...",
  "html_url": "https://github.com/...",
  "homepage": "https://...",
  "topics": ["e-commerce", "payment", "full-stack"],
  "language": "React",
  "languages": [
    { "name": "React", "percentage": "65.0", "icon": FaReact, "color": "#61dafb" }
  ],
  "stargazers_count": 24,
  "forks_count": 8
}

3. Technology Icons & Colors

The component includes automatic mapping for popular technologies:

Supported Technologies:

  • React, Vue.js, Angular
  • Node.js, Express.js
  • JavaScript, TypeScript
  • MongoDB, PostgreSQL, Redis
  • Tailwind CSS, Next.js, Vite
  • Python, Java
  • And many more...

Each technology gets its appropriate icon and brand color automatically.

4. Loading States

  • Loading: Shows a spinner while fetching data
  • Error: Shows error message if settings.json can't be loaded
  • Success: Displays the dynamic project grid

Configuration

Adding New Projects

Simply add new project objects to the staticProjects array in settings.json:

{
  "projects": {
    "staticProjects": [
      {
        "id": 7,
        "name": "New Project",
        "description": "Description of your new project",
        "technologies": ["React", "TypeScript", "Vite"],
        "category": "Frontend",
        "featured": true,
        "status": "Completed",
        "startDate": "2024-01-01",
        "endDate": "2024-06-01",
        "githubUrl": "https://github.com/username/project",
        "liveUrl": "https://project.domain.com",
        "imageUrl": "https://images.unsplash.com/photo-xxx",
        "tags": ["tag1", "tag2", "tag3"],
        "highlights": [
          "Feature 1",
          "Feature 2",
          "Feature 3"
        ],
        "stats": {
          "stars": 10,
          "forks": 3,
          "watchers": 5,
          "issues": 1
        }
      }
    ]
  }
}

Supported Technology Icons

The component automatically detects and assigns icons for these technologies:

Technology Icon Color
React FaReact #61dafb
Vue.js FaVuejs #4fc08d
Angular FaAngular #dd0031
Node.js FaNodeJs #339933
Python FaPython #3776ab
TypeScript SiTypescript #3178c6
JavaScript FaJs #f7df1e
MongoDB SiMongodb #47a248
PostgreSQL SiPostgresql #336791
Tailwind CSS SiTailwindcss #38bdf8
Next.js SiNextdotjs #000000
Vite SiVite #646cff
Express.js SiExpress #000000
Redis SiRedis #dc382d
... ... ...

If a technology isn't recognized, it defaults to a JavaScript icon.

Features

Visual Enhancements

  • ✅ Dynamic technology icons with brand colors
  • ✅ Responsive grid layout
  • ✅ Hover animations and transitions
  • ✅ Language breakdown visualization
  • ✅ GitHub stats display
  • ✅ Loading and error states

Data Features

  • ✅ Automatic format conversion
  • ✅ Technology icon mapping
  • ✅ Fallback handling
  • ✅ Random view counters (demo)
  • ✅ Date formatting
  • ✅ Count formatting (K/M suffixes)

Usage in App

The component can be used in your routing:

import ProjectsStatic from './pages/ProjectsStatic';

// In your router
<Route path="/projects-static" element={<ProjectsStatic />} />

Benefits

  1. No Code Changes: Add/remove projects via configuration
  2. Consistent Design: All projects use the same card layout
  3. Technology Recognition: Automatic icons and colors (see table above)
  4. Error Handling: Graceful fallbacks for missing data
  5. Performance: Efficient data transformation
  6. Maintainable: Clean separation of data and presentation

Comparison with Main Projects Component

Feature ProjectsStatic.jsx Projects.jsx
Data Source settings.json only settings.json + GitHub API
Mode Support Static only Static + GitHub modes
Complexity Simple Advanced
Use Case Pure config-based Hybrid config/API

Choose ProjectsStatic.jsx when you want full control over project data through configuration, or Projects.jsx when you want the flexibility to switch between static and GitHub API modes.

© 2025 Krishna GSVV
Portfolio: VKrishna04.me
GitHub: VKrishna04
Org: Life Experimentalists

🧭 Documentation Sidebar

Use this sidebar for your wiki, GitHub Pages, or static documentation site. Copy/paste or import as needed.

Clone this wiki locally