https://github.com/jbcom/jbcom.github.io
jbcom ecosystem showcase - jonbogaty.com | Professional portfolio, OSS packages, demos, and API documentation
https://github.com/jbcom/jbcom.github.io
Last synced: 4 months ago
JSON representation
jbcom ecosystem showcase - jonbogaty.com | Professional portfolio, OSS packages, demos, and API documentation
- Host: GitHub
- URL: https://github.com/jbcom/jbcom.github.io
- Owner: jbcom
- Created: 2025-12-16T10:39:11.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-12-20T18:52:12.000Z (6 months ago)
- Last Synced: 2025-12-21T14:59:50.157Z (6 months ago)
- Language: TypeScript
- Size: 1.12 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
# jbcom.github.io
> Jon Bogaty's professional portfolio and jbcom ecosystem showcase
## 🎯 Purpose
This site serves as:
1. **Professional Portfolio** - Resume, skills, experience
2. **Ecosystem Directory** - All jbcom packages with links to their repos
3. **Static Site** - Fast, accessible, zero JavaScript required
## 🏗️ Architecture: Static-First
This is a **pure static site** built for GitHub Pages. No React, no build tools, just HTML/CSS.
```
/
├── content/ # Content as source (markdown/YAML)
│ ├── resume.md # Resume source
│ ├── about.md # About page content
│ ├── vision.md # Ecosystem vision
│ └── ecosystem.yml # 20+ packages with metadata
├── templates/ # Pandoc templates for resume generation
│ └── resume-pdf.html # PDF generation template
├── assets/
│ └── css/
│ └── style.css # Complete design system implementation
├── *.html # Static HTML pages
└── .github/workflows/
└── deploy.yml # Build & deploy (generates PDF/DOCX)
```
### Build Process
1. **Content** - All content stored as markdown or YAML
2. **Generation** - GitHub Actions generates PDF/DOCX from markdown via pandoc
3. **Deployment** - Static HTML/CSS deployed to GitHub Pages
**No JavaScript required** for core functionality. Fast page loads (<1s).
## 🎨 Design System
### Colors
- **Background**: Deep slate (#020617)
- **Surface**: Slate panels with glassmorphism (#0f172a)
- **Primary**: Cyan/Teal (#0ea5e9)
- **Secondary**: Deep blue (#3170aa)
- **Accent**: Purple (#7c3aed)
### Typography
- **Headings**: Space Grotesk - bold, technical, modern
- **Body**: Inter - clean, readable, professional
- **Code**: JetBrains Mono - monospace, developer-friendly
### Components
- Glassmorphic cards with backdrop blur
- Gradient accents on hover states
- Responsive grid layouts
- Mobile bottom navigation
## 📱 Responsive Design
| Breakpoint | Layout |
|------------|--------|
| xs (0-599px) | Bottom nav, single column |
| sm (600-899px) | Collapsible drawer, 2 columns |
| md (900-1199px) | Persistent sidebar, 2-3 columns |
| lg (1200px+) | Full sidebar, 3+ columns |
## 🚀 Development
```bash
# Install dependencies
npm install
# Start dev server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Deploy to GitHub Pages
npm run deploy
```
## 📁 Structure
```
src/
├── components/
│ ├── Layout.tsx # Main layout with responsive sidebar
│ └── StrataBackground.tsx # The 3D layered background
├── data/
│ └── ecosystem.ts # Package catalog
├── pages/
│ ├── HomePage.tsx # Landing with hero
│ ├── AboutPage.tsx # Bio and skills
│ ├── EcosystemPage.tsx # Package directory
│ ├── ProjectPage.tsx # Individual package
│ └── DemosPage.tsx # Interactive strata demos
├── theme.ts # Material UI theme
├── main.tsx # Entry point
└── App.tsx # Router and layer composition
```
## 🐕 Dogfooding
This site demonstrates what strata can do:
- The animated background uses strata components
- The demos page showcases interactive scenes
- All 3D is powered by React Three Fiber
The best way to show what a library can do is to use it.
## 📦 Tech Stack
- **React 18** - UI framework
- **TypeScript** - Type safety
- **Vite** - Build tool
- **Material UI 5** - Component library
- **React Router 6** - Navigation
- **React Three Fiber** - 3D rendering
- **React Three Drei** - R3F helpers
## 📄 License
MIT © Jon Bogaty