Keith Bishop Portfolio - Madrock Media Studios

Strategic builder blending Six Sigma discipline, tech innovation, and Vegas energy.

🚀 Features

• Complete Career Timeline: 30+ years of IT experience from DOS to modern web
• Project Showcase: Dynamic JSON-based project cards with filtering
• Vegas Tracker: Real-time deal tracking dashboard
• Penguin Toss Game: Interactive game showcasing modular code architecture
• Responsive Design: Mobile-first with neon-inspired Vegas aesthetic
• SEO Optimized: Complete meta tags, Open Graph, and PWA support

🛠️ Tech Stack

• Framework: Vite + Vanilla JavaScript
• Routing: Custom hash-based SPA router
• Styling: CSS with custom properties, Google Fonts (Montserrat, Merriweather)
• Design: Neon-inspired palette (deep navy, electric blue, gold accents)

📦 Installation

npm install

🏃 Development

npm run dev

Runs the development server at http://localhost:5173

🔨 Build

npm run build

Builds the production-ready site to the dist/ directory.

🌐 Deployment

Vercel (Recommended)

1. Install Vercel CLI:

npm install -g vercel

2. Deploy:

npm run deploy:vercel

Or connect your GitHub repo to Vercel for automatic deployments.

Netlify

1. Install Netlify CLI:

npm install -g netlify-cli

2. Deploy:

npm run deploy:netlify

Or connect your GitHub repo to Netlify for automatic deployments.

GitHub Actions

The repository includes a GitHub Actions workflow that automatically deploys to Vercel on push to main.

Required Secrets:

• VERCEL_TOKEN: Your Vercel API token
• VERCEL_ORG_ID: Your Vercel organization ID
• VERCEL_PROJECT_ID: Your Vercel project ID

📁 Project Structure

myPortfolio/
├── src/
│   ├── assets/              # Stylesheets
│   ├── components/          # UI components
│   ├── data/               # JSON data
│   ├── views/              # Route views
│   ├── main.js             # App entry
│   └── router.js           # SPA routing
├── public/                 # Static assets
├── index.html             # HTML entry
├── vercel.json            # Vercel config
├── netlify.toml           # Netlify config
└── .github/workflows/     # CI/CD

🎨 Branding

• Colors: Deep navy (#0a1628), Electric blue (#00bfff), Gold (#d4af37)
• Fonts: Montserrat (headings), Merriweather (body)
• Logo: KB / Madrock Media Studios

📄 License

© 2025 Keith Bishop | Madrock Media Studios