vp

vp

Virtual Photography Gallery using Jekyll

PatrickJr's Virtual Photography Portfolio


Made with Jekyll Images Hosted with Imgur

A modern, responsive portfolio website showcasing virtual photography captured in various video games by PatrickJr. The site is built with Jekyll and enhanced with modern web technologies.

🌐 Live Website: https://vp.grimtech.co.uk/

πŸ”„ GitHub Pages Mirror: https://patrickjnr.github.io/vp

About

The site is built using Jekyll, a static site generator, and hosted on GitHub Pages. Images are hosted on Imgur. New content and updates are tracked on the changelog page.

✨ Features

  • 🎨 Responsive design optimized for all devices
  • πŸ“Έ Automatic image gallery generation with thumbnails
  • πŸ” SEO optimization with Jekyll SEO Tag
  • πŸ“‘ RSS feed support
  • πŸ“Š Google Analytics 4 integration
  • πŸ’¬ Social media mentions support
  • 😊 Emoji support via Jemoji
  • πŸš€ Modern build process with Node.js
  • πŸ–ΌοΈ Automated image processing
  • πŸ—ΊοΈ Automatic sitemap generation
  • πŸ”— Social media integration
  • πŸ“± Mobile-first design

πŸš€ Prerequisites

  • Ruby >= 3.0.0
  • Bundler >= 2.3.0
  • Node.js >= 16.0.0 (for frontend assets)
  • Python 3.x (for image processing scripts)
  • Jekyll >= 4.3.0

Installation

  1. Clone the repository:

    git clone https://github.com/PatrickJnr/vp.git
    cd vp
    
  2. Install Ruby dependencies:

    bundle install
    
  3. Install Node.js dependencies:

    npm install
    
  4. Install Python dependencies (for image processing scripts):

    pip install -r requirements.txt
    

πŸ› οΈ Local Development

  1. Start the development server:

    # Using the provided script (recommended)
    ./run.bat
       
    # Or manually
    bundle exec jekyll serve --livereload
    
  2. The site will be available at http://localhost:4000

  3. For production build:

    JEKYLL_ENV=production bundle exec jekyll build
    

πŸ–ΌοΈ Image Processing

The repository includes a Python script for processing and uploading images:

generate_albumv3.py

This script handles image processing and Imgur uploads:

  1. Create a .env file with your Imgur API credentials:

    CLIENT_ID=your_client_id
    CLIENT_SECRET=your_client_secret
    ACCESS_TOKEN=your_access_token
    REFRESH_TOKEN=your_refresh_token
    
  2. Run the script with a directory containing images:

    python generate_albumv3.py path/to/image/directory
    

Features:

  • Automatic thumbnail generation
  • Batch image processing
  • Imgur upload integration
  • Metadata handling
  • JSON data generation for galleries

βš™οΈ Configuration

Key Files

  • _config.yml - Main Jekyll configuration
  • package.json - Node.js dependencies and scripts
  • Gemfile - Ruby dependencies

Data Files

  • _data/settings.yml - Site settings
  • _data/navigation.yml - Navigation structure
  • _data/ui-text.yml - UI text strings
  • _data/*.json - Various data files for galleries and content

πŸ“ Directory Structure

vp/
β”œβ”€β”€ .github/          # GitHub workflows and templates
β”œβ”€β”€ _data/            # Site data files
β”‚   β”œβ”€β”€ galleries/    # Gallery data
β”‚   β”œβ”€β”€ settings/     # Configuration files
β”‚   └── *.yml         # YAML data files
β”œβ”€β”€ _includes/        # Reusable components
β”œβ”€β”€ _layouts/         # Page templates
β”œβ”€β”€ _plugins/         # Jekyll plugins
β”œβ”€β”€ _posts/           # Blog posts
β”œβ”€β”€ _site/            # Generated site (not in version control)
β”œβ”€β”€ assets/           # Static assets
β”‚   β”œβ”€β”€ css/         # Compiled CSS
β”‚   β”œβ”€β”€ img/         # Images and icons
β”‚   └── js/          # Source JavaScript
β”œβ”€β”€ js/              # Frontend JavaScript
β”œβ”€β”€ node_modules/     # Node.js dependencies
β”œβ”€β”€ pages/            # Static pages
β”œβ”€β”€ .gitignore        # Git ignore rules
β”œβ”€β”€ .env.example      # Example environment variables
β”œβ”€β”€ Gemfile           # Ruby dependencies
β”œβ”€β”€ package.json      # Node.js dependencies
└── generate_albumv3.py # Image processing script

Contributing

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

πŸ“„ License

Code

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

Content

All virtual photography and screenshots are Β© PatrickJr and are licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Third-Party

πŸ“¬ Contact

For inquiries, collaborations, or feedback:


Made with ❀️ by PatrickJr | MIT License | View Changelog