Jameson Campbell - Portfolio & Writing

A modern, professional portfolio showcasing internal tools engineering, AI productivity projects, and thought leadership through detailed case studies and frameworks.

🌐 Live Site

Visit the live site at: jamesoncodes.github.io

🎯 Purpose

This website establishes credibility as a builder of internal tools and AI-enabled systems who connects business pain points to technical solutions. It demonstrates both technical execution and strategic thinking through detailed project case studies and actionable frameworks.

Positioning: Sales Operations Manager & Internal Tools Builder who bridges operations and engineering

🛠️ Tech Stack

• HTML5 - Semantic markup with accessibility focus
• Tailwind CSS (via CDN) - Utility-first styling with custom design system
• Vanilla JavaScript - Interactive features and animations
• GitHub Pages - Static hosting with custom domain support

📁 Project Structure

/
├── index.html                    # Main portfolio site
├── styles.css                    # Custom CSS (animations, overrides)
├── script.js                     # JavaScript functionality
├── favicon.svg                   # Custom gradient favicon
├── favicon.ico                   # Browser compatibility fallback
├── assets/                       # Organized image assets
│   ├── profile.jpg              # Personal profile photo
│   ├── articles/                # Article images
│   │   ├── flexter.jpg          # Fitness apps journey images
│   │   ├── toned.jpg            
│   │   ├── get_loved_up.jpg     
│   │   ├── portal_onboarding_screen.png # CX systems assets
│   │   ├── program_chamption.jpg    
│   │   └── program_roadmap.jpg      
│   ├── projects/                # Project screenshots
│   │   ├── sock_scout_1-min.png # Featured project gallery
│   │   ├── sock_scout_2-min.png     
│   │   └── sock_scout_3-min.png     
│   ├── diagrams/                # Architecture diagrams
│   │   └── sock-scout-architecture-diagram.PNG
│   └── logos/                   # Brand logos with theme switching
│       ├── cursor-dark.svg      # AI development tools
│       ├── cursor-light.svg     
│       ├── openai-dark.svg      
│       ├── openai-light.svg     
│       ├── n8n-dark.svg         
│       ├── n8n-light.svg        
│       ├── pinecone-dark.svg    
│       ├── pinecone-light.svg   
│       └── vertex-ai.svg        
├── articles/                    # Blog posts and case studies
│   ├── fitness-apps-journey.html # Startup journey story
│   ├── hubspot-productization.html # Service productization case study
│   ├── cx-systems-framework.html  # Customer experience framework
│   └── internal-tools-builder.html # Internal tools thought leadership
└── README.md                    # This file

✨ Features

Core Functionality

• Responsive Design - Mobile-first approach with enhanced mobile UX
• Dark Mode - Toggle between light and dark themes (persisted in localStorage)
• Smooth Animations - Fade-in effects on scroll using Intersection Observer
• Interactive Gallery - Full-screen image modal with keyboard navigation
• Performance Optimized - Debounced scroll events, efficient animations

Content & Navigation

• Professional Writing - Four published articles with detailed case studies
• Project Showcases - Featured project with interactive gallery
• AI Arsenal - Theme-aware brand logos with external links
• Mobile-Optimized Philosophy - Responsive table/card layout for mobile
• Custom Favicon - Professional gradient "J" monogram

Accessibility & UX

• Semantic HTML - Proper heading hierarchy and ARIA labels
• Keyboard Navigation - Full keyboard support for all interactions
• Touch-Friendly - Optimized for mobile and tablet interactions
• Loading States - Immediate content visibility (fixed fade-in bug)

📄 Content Sections

1. Hero - Bold positioning with clear value proposition
2. Featured Project - Deep dive into Semantic Visual Search with interactive gallery
3. What I Build - Work projects and personal experiments with live demos
4. About Me - Personal story, background, and approach to building
5. Philosophy - 4-step process (Discover → Prototype → Validate → Scale/Kill)
6. AI Arsenal - Curated AI pair programming tools with theme-aware logos
7. Writing - Published articles with detailed case studies and frameworks
8. Contact - Clear CTAs with professional contact information and location

📝 Published Articles

1. 🧠 Why Every Company Needs an Internal Tools Builder

• Strategic Framework: Thought leadership on the emerging Internal Tools Builder role
• Content: "Vibe coding" concept, organizational leverage principles, future of work
• Positioning: Evolution beyond RevOps with broader operational scope

2. ⚙️ Transforming HubSpot Services into Productized Offerings

• Framework: Complete productization methodology with real implementation
• Results: Recurring revenue, automated billing, standardized delivery
• Media: Marketing video, onboarding video, and process documentation

3. 🎯 Designing Customer Experience Systems

• Methodology: 5-step quarterly framework for CX optimization
• Implementation: HubSpot Admin Program case study with measurable results
• Media: Portal screenshots, program champion slides, and roadmap visuals

4. 🏋️‍♂️ Behind the Scenes: The Trials and Triumphs of Creating Fitness Apps

• Journey: From zero experience to #13 top-grossing Health & Fitness app
• Content: Flexter, Toned, and Get Loved Up development stories
• Media: App screenshots, launch party video, and visual timeline

🎨 Design System

Visual Identity

• Typography: Clean sans-serif with monospace accents for technical content
• Color Palette:
  • Primary: Electric blue (#2E9DFB)
  • Dark variant: (#1E7FC7)
  • Neutral grays with proper contrast ratios
• Components: Rounded cards, subtle shadows, smooth transitions

Mobile Experience

• Enhanced Cards: Gradient number badges with neumorphic depth effects
• Responsive Tables: Auto-converting to card layouts on mobile
• Touch Interactions: Optimized button sizes and hover states
• Performance: Immediate content loading without animation delays

🚀 Technical Implementation

JavaScript Features

• Dark Mode Toggle - Persisted in localStorage with smooth transitions
• Mobile Menu - Hamburger menu with smooth animations
• Image Gallery - Full-screen modal with keyboard navigation (ESC, arrows)
• Scroll Animations - Intersection Observer for performance
• Active Navigation - Dynamic highlighting based on scroll position

Performance Optimizations

• Debounced Events - Efficient scroll and resize handlers
• Lazy Loading - Images load as needed
• Minimal Dependencies - Tailwind CDN only, no framework overhead
• Optimized Assets - Compressed images with descriptive alt text

🔧 Development & Deployment

Local Development

git clone https://github.com/JamesonCodes/JamesonCodes.github.io.git
cd JamesonCodes.github.io
open index.html  # or use a local server

Deployment

Automatically deployed via GitHub Pages from main branch:

git add .
git commit -m "feat: your changes"
git push origin main

Changes are live at https://jamesoncodes.github.io within minutes.

📱 Browser Support

• Modern Browsers: Chrome, Firefox, Safari, Edge (latest versions)
• Mobile: iOS Safari, Chrome Mobile, Samsung Internet
• Features: Progressive enhancement with graceful fallbacks

🎯 Key Achievements

Content Quality

• 4 Published Articles - Detailed case studies and strategic thought leadership
• Interactive Media - Videos, galleries, and visual documentation
• Actionable Frameworks - Reusable methodologies for others
• Strategic Positioning - Industry thought leadership on emerging roles

Technical Excellence

• Zero Build Process - Simple, maintainable static site
• Accessibility Compliant - WCAG guidelines followed
• Performance Focused - Fast loading, smooth interactions
• Mobile-First - Optimized for all device types

Professional Branding

• Custom Favicon - Professional gradient monogram
• Consistent Design - Cohesive visual identity across all pages
• Clear Positioning - Bridge between operations and engineering

📄 License

MIT License - Feel free to use this as inspiration for your own portfolio!

SEO & Indexing

This portfolio is optimized for search engines with:

• Comprehensive meta tags and Open Graph tags
• XML sitemap at /sitemap.xml
• robots.txt configuration
• Semantic HTML structure
• Mobile-responsive design

Google Search Console Setup

1. Visit Google Search Console
2. Add property: https://jamesoncodes.github.io
3. Verify ownership using HTML tag method
4. Submit sitemap: https://jamesoncodes.github.io/sitemap.xml
5. Request indexing for main pages

🤝 Contributing

This is a personal portfolio, but feedback and suggestions are welcome via issues.

---

Built with precision by Jameson Campbell
Bridging operations and engineering through thoughtful tooling