A personal portfolio and project showcase built with React, TypeScript, and Vite, deployed to GitHub Pages. Features interactive data visualizations, detailed project deep-dives, and teaching & mentorship highlights.
🌐 Live Site:donbr.github.io
- React 19 with TypeScript
- Vite 6 for fast development and optimized builds
- Tailwind CSS for styling
- React Router v7 for navigation
- shadcn/ui for UI components
- Visualization Libraries:
- ECharts for data visualization
- Cytoscape.js for network graphs
- Leaflet for map visualization
- Deployment: GitHub Pages
- Node.js 18.17.0 or higher
- npm 9.0.0 or higher
# Clone the repository
git clone https://github.com/donbr/donbr.github.io.git
cd donbr.github.io
# Install dependencies
npm install# Start development server with hot reload
npm run dev
# Server will start at http://localhost:5173# Create production build
npm run build
# Preview production build locally
npm run preview# Run ESLint
npm run lint# Deploy to GitHub Pages# (automatically runs build before deploying)
npm run deploydonbr.github.io/
├── src/
│ ├── components/
│ │ ├── layout/ # Layout components (header, footer)
│ │ ├── projects/ # Project-specific components
│ │ │ ├── gdelt-kb/ # GDELT Knowledge Base page
│ │ │ ├── advanced-retrieval/ # Advanced Retrieval page
│ │ │ ├── gdelt/ # GDELT Record Viewer
│ │ │ ├── cytoscape/ # Network visualization
│ │ │ ├── event-analyzer/ # Event analysis
│ │ │ └── situational-awareness/ # Situational awareness graph
│ │ └── ui/ # shadcn/ui components
│ ├── data/ # JSON data files for visualizations
│ ├── lib/ # Utility functions
│ ├── pages/ # Page components
│ │ ├── HomePage.tsx # Landing page with sections
│ │ ├── ProjectsPage.tsx # Projects listing
│ │ └── NotFoundPage.tsx # 404 page
│ ├── App.tsx # Main app component with routing
│ └── main.tsx # Entry point
├── docs/ # Documentation
│ └── site-enhancement-plan.md # Detailed enhancement roadmap
├── CLAUDE.md # AI assistant project guide
└── README.md # This file
Highlights experience as Peer Supporter & Mentor for AI Makerspace Certified AI Engineer Bootcamp, including:
- Session 7: Synthetic Data Generation
- Sessions 8-9: RAG Evaluation Metrics
- Session 10: Advanced Retrieval Strategies
GDELT Knowledge Base (/assets/projects/gdelt-knowledge-base)
- Five-layer RAG architecture visualization
- Retrieval evaluation results with Cohere reranker comparison
- Technical implementation details and dataset statistics
Advanced Retrieval Strategies (/assets/projects/advanced-retrieval)
- Comprehensive retrieval taxonomy (Vector, Keyword, Hybrid, Re-ranking)
- Cohere reranker deep dive with performance metrics
- Teaching insights and pedagogical approach
- GDELT GKG Viewer with map visualizations
- Cytoscape network visualizations
- Event analysis system
- Situational awareness graphs
The project uses TypeScript path aliases for clean imports:
importLayoutfrom'@/components/layout/Layout';import{cn}from'@/lib/utils';- Tailwind CSS with custom configuration
- cn() utility for conditional class names (clsx + tailwind-merge)
- shadcn/ui components for consistent UI elements
- Add project metadata to
projectsarray insrc/pages/ProjectsPage.tsx - Create component in
src/components/projects/[project-name]/ - Add route in
src/App.tsx - Add data files (if needed) to
src/data/
See CLAUDE.md for detailed development guidance.
The site is automatically deployed to GitHub Pages using the gh-pages package:
npm run deployThis command:
- Runs
npm run build(via predeploy hook) - Deploys the
dist/folder to thegh-pagesbranch - GitHub Pages serves the site at https://donbr.github.io
This project includes CLAUDE.md with comprehensive guidance for AI coding assistants like Claude Code. The file documents:
- Project architecture and patterns
- Build commands and workflows
- Component structure and routing
- Data management patterns
Modern browsers with ES2020 support:
- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Bundle Size: ~2MB (optimized for production)
- Build Time: ~6-7 seconds
- Technologies: Vite ensures fast HMR during development
See docs/site-enhancement-plan.md for detailed roadmap:
- Phase 3: Content generation automation
- Phase 4: Architecture diagrams (in progress)
- Phase 5: Mentorship analytics page (optional)
All rights reserved. The code and design of this portfolio are proprietary and not licensed for public use or distribution.
- GitHub:@donbr
- LinkedIn:Don Branson
- Hugging Face:@dwb2023
Built with ❤️ using React, TypeScript, and Vite