Skip to content

README.md

Latest commit

 

History

History
107 lines (79 loc) · 2.76 KB

README.md

File metadata and controls

107 lines (79 loc) · 2.76 KB
Raw

Matthew Feroz - Portfolio Website

A clean, accessible portfolio website showcasing sponsors, YouTube channel, and contact information.

Features

  • 🎨 Modern, responsive design with dark mode support
  • ♿ WCAG AA accessible with proper contrast ratios and keyboard navigation
  • 🔗 Clean URLs (no .html extensions)
  • 📱 Mobile-friendly responsive layout
  • 🎯 Modular code structure (CSS, JS, and data separated)

GitHub Pages Setup

Initial Setup

  1. Create a GitHub repository (if you haven't already)

    git init
git add .
git commit -m "Initial commit"
git branch -M main
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO_NAME.git
git push -u origin main

  2. Enable GitHub Pages

    • Go to your repository on GitHub
    • Click Settings → Pages
    • Under Source, select Deploy from a branch
    • Choose main branch and / (root) folder
    • Click Save

  3. Your site will be live at:

    • https://YOUR_USERNAME.github.io/YOUR_REPO_NAME/
    • Or if the repo is named YOUR_USERNAME.github.io, it will be at:
    • https://YOUR_USERNAME.github.io/

Clean URLs

The site uses clean URLs (without .html extensions):

  • / or /home → index.html
  • /sponsors → sponsors.html
  • /sponsor-me → sponsor-me.html

This is handled by the 404.html redirect script and _config.yml configuration.

Updating Your Site

After making changes:

git add .
git commit -m "Your commit message"
git push

GitHub Pages will automatically rebuild your site (usually takes 1-2 minutes).

Local Development

Simply open index.html in your browser or use a local server:

# Using Python
python -m http.server 8000

# Using Node.js (http-server)
npx http-server

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000

File Structure

.
├── index.html          # Home page (portfolio)
├── sponsors.html       # Sponsors page
├── sponsor-me.html     # Sponsor contact page
├── 404.html           # Clean URL redirect handler
├── _config.yml        # GitHub Pages/Jekyll config
├── css/
│   └── styles.css     # Custom styles
├── js/
│   ├── config.js      # Tailwind configuration
│   ├── theme.js       # Theme toggle functionality
│   └── components.js  # Reusable components
└── data/
    ├── links.js       # Portfolio links data
    └── sponsors.js    # Sponsors data

Customization

  • Add/Edit Links: Edit data/links.js
  • Add/Edit Sponsors: Edit data/sponsors.js
  • Change Colors: Edit js/config.js and css/styles.css
  • Modify Footer: Edit js/components.js

License

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