A dynamic portfolio website that automatically showcases my pinned GitHub repositories with live demos, theme customization, and responsive design.

🌐 Live Demo: https://projects.brianwalker.dev

• Auto-Syncing Projects - Fetches and displays pinned GitHub repositories automatically
• Live Project Demos - Each project is deployed and accessible with one click
• Theme Customization - Switch between 5 accent colors (neutral, green, blue, purple, orange)
• Dark/Light Mode - Toggle between dark and light themes
• Smart Search & Sort - Filter projects by name or description, sort by date or alphabetically
• Responsive Design - Optimized for desktop, tablet, and mobile devices
• Image Lightbox - Click project thumbnails for full-size preview
• Weekly Auto-Updates - GitHub Actions workflow refreshes projects every week
• SEO Optimized - Comprehensive on-page SEO, structured data (Schema.org), sitemap, and performance optimization
• Accessible - WCAG compliant with keyboard navigation, screen reader support, and ARIA labels

• Frontend: HTML5, CSS3, Vanilla JavaScript
• Hosting: GitHub Pages
• Automation: GitHub Actions (CI/CD)
• API: GitHub GraphQL API for pinned repositories

1. Clone the repository:

   git clone https://github.com/brianwalkerdev/projects.brianwalker.dev.git cd projects.brianwalker.dev

2. Install dependencies (optional - only needed for build):

   npm install

3. Run locally:

   • Simply open index.html in your browser, or
   • Use the dev server: npm run dev (opens at http://localhost:8080)

4. Build for production:

   npm run build

   • Static files are generated in the dist/ folder

• Add Project Thumbnails: Place images in assets/img/ named after your repository
• Modify Workflow: Edit .github/workflows/deploy-and-update.yml to customize automation
• Update Projects: GitHub Actions runs weekly, or trigger manually from the Actions tab

This project is designed for static hosting. Deploy to any of these platforms:

• Automatically deployed via GitHub Actions
• Custom domain configured: projects.brianwalker.dev
• Projects deployed to subdirectories: /<project-name>/

npm run build # Deploy the dist/ folder

npm run build # Deploy the dist/ folder

Upload the contents of the dist/ folder to any static hosting service.

projects.brianwalker.dev/ ├── index.html # Main portfolio page ├── projects.json # Auto-generated project metadata ├── robots.txt # Search engine crawler directives ├── sitemap.xml # XML sitemap for SEO ├── assets/ │ ├── css/ │ │ └── style.css # Styles with theme support │ ├── js/ │ │ └── main.js # Dynamic functionality │ └── img/ # Project thumbnails ├── build.js # Build script for static compilation ├── package.json # Project metadata and scripts ├── SEO-CHANGELOG.md # Documentation of SEO optimizations ├── SEO-DEPLOYMENT-CHECKLIST.md # Post-deployment SEO checklist └── .github/ └── workflows/ └── deploy-and-update.yml # Automated deployment 

Note:

• build.js is the main build script that compiles project data and assets for deployment.
• .github/workflows/deploy-and-update.yml is a GitHub Actions workflow that automates building and deploying the site, as well as updating project data on a schedule.

For more details on the build and deployment process, see CONTRIBUTING.md.

This portfolio is optimized for search engines and performance:

• Semantic HTML5 with proper heading hierarchy and ARIA labels
• Structured Data using JSON-LD (Person, WebSite, ProfilePage schemas)
• Open Graph & Twitter Cards for optimized social media sharing
• robots.txt & sitemap.xml for proper search engine indexation
• Lazy loading images and deferred JavaScript for fast page loads
• WCAG 2.1 compliant with full keyboard navigation and screen reader support
• Optimized meta tags with keyword-rich titles and descriptions

For detailed information about SEO optimizations, see SEO-CHANGELOG.md.
For post-deployment SEO tasks, see SEO-DEPLOYMENT-CHECKLIST.md.

• CONTRIBUTING.md - Development setup, architecture guide, and contribution guidelines
• LICENSE - MIT License details and terms of use

Brian Walker

• Portfolio: https://projects.brianwalker.dev
• GitHub: @brianwalkerdev
• Email: brianwalkerdev@users.noreply.github.com

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

Feel free to use this as a template for your own portfolio!