George Erol Fouché Portfolio - Production Roadmap

Project: Software Engineer Portfolio
Domain: georgeerol.github.io
Platform: GitHub Pages (Jekyll)
Last Updated: January 4, 2026
Current Version: 2.0
Overall Progress: 42/119 tasks (35%)

📋 Project Overview

A modern, responsive portfolio website showcasing professional experience in data engineering, robotics, and full-stack development. Features client work, personal projects, dark/light theme, and professional iconography.

Professional Information

• Name: George Erol Fouché
• Title: Software Engineer
• Tagline: “Data Engineer & Robotics Specialist”
• Location: San Francisco Bay Area
• Focus Areas: Big Data, IoT, Autonomous Systems, Full-Stack Development

Portfolio Sections

1. Client Work - Production applications (SLIVER Pizzeria, Vintage Wine Estates)
2. Robotics & AI - Drone simulations, robotic arms, autonomous vehicles
3. Big Data - IoT pipelines, Spark workflows, Flink streaming
4. Web Applications - Full-stack apps with React/Vue
5. Mobile - Android & iOS applications
6. Contact - Professional links and contact information

Current Emoji Usage (25+ icons)

| Location | Current Emoji | Purpose | |———-|—————|———| | Theme toggle | ☀️ / 🌙 | Light/dark mode | | Hero buttons | 🚀 📂 📧 | View Projects, GitHub, Contact | | Status badge | 🔍 📍 | Open to opportunities, Location | | About section | 👨🏿‍💻 🎓 🤖 🔧 🌐 📱 | Section headers, skill categories | | Client Work | 💼 🍕 🍷 🏢 | Section/project identifiers | | Project titles | 🚁 🔍 🦾 🚗 🌐 ⚡ 💰 ✅ 📋 🌤️ | Project icons | | Key Features | 🎯 | Feature headers | | Links | 🔗 💻 💼 🚀 🔐 📚 | Button icons | | Contact | 📫 💼 💻 | Section header, links |

🛠️ Tech Stack

Frontend

| Tool | Version | Purpose | |——|———|———| | Jekyll | ^4.3.x | Static site generator | | HTML5/Markdown | - | Content structure | | SCSS/CSS | - | Styling with dark/light themes | | Lucide Icons | Latest | Professional SVG iconography |

Infrastructure

| Tool | Purpose | |——|———| | GitHub Pages | Production hosting | | Docker | Local development | | Google Analytics | Visitor tracking | | Jekyll SEO Tag | Search optimization |

Integrations

| Tool | Purpose | |——|———| | Google Fonts | Typography (Inter, JetBrains Mono) | | Lucide CDN | Icon library | | Jekyll Sitemap | SEO sitemap generation | | Jekyll Feed | RSS/Atom feed |

📊 Quick Summary

📦 Version 1.0: Foundation

Status: ✅ Complete (12/12)

1. Jekyll static site setup ✅
2. GitHub Pages deployment ✅
3. Responsive layout (desktop/tablet/mobile) ✅
4. Dark/Light theme toggle with persistence ✅
5. Hero section with profile image ✅
6. About section with skills grid ✅
7. Navigation with smooth scrolling ✅
8. Professional favicon set ✅
9. Social links (GitHub, LinkedIn) ✅
10. Contact section ✅
11. SCSS compilation and minification ✅
12. Basic meta tags and SEO ✅

📦 Version 1.1: Client Work Section

Status: ✅ Complete (8/8)

1. Client Work section as primary showcase ✅
2. SLIVER Pizzeria project card ✅
3. Vintage Wine Estates project card ✅
4. Featured card layout with 2-column design ✅
5. Client logos and branding ✅
6. Live site links ✅
7. Tech badges for each project ✅
8. Key features lists ✅

📦 Version 1.2: Project Categories

Status: ✅ Complete (10/10)

Robotics & AI Projects

1. Deep Learning Drone Simulator ✅
2. Search And Sample Rover ✅
3. Robotic Perception (PR2 Robot) ✅
4. Robotic Arm Pick and Drop ✅
5. Self-Driving Car Behavioral Cloning ✅

Big Data Projects

1. IoT AWS Spark ✅
2. E2E Spark Flow ✅
3. Commercing With Flink ✅

Web & Mobile Projects

1. Web Applications category (Todo, Expense, Project Management) ✅
2. Mobile Applications category (Weather, Bitcoin Ticker) ✅

📦 Version 1.3: SEO & Performance

Status: ✅ Complete (6/6)

1. Jekyll SEO Tag plugin ✅
2. Open Graph meta tags ✅
3. Twitter Card meta tags ✅
4. Google Analytics integration (G-L4G7PPE4VC) ✅
5. Sitemap generation ✅
6. Atom/RSS feed ✅

📦 Version 1.4: Docker Development Setup

Status: ✅ Complete (3/3)

1. Dockerfile for Jekyll ✅
2. docker-compose.yml for local development ✅
3. Hot reload with volume mounting ✅

📦 Version 2.0: Lucide Icons Migration

Status: 🔴 In Progress (15/33) Priority: High Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 1

Phase 1: Core Infrastructure ✅

1. Add Lucide CDN to default.html ✅
2. Create .lucide-icon CSS class ✅
3. Theme toggle icons (sun/moon) ✅

Phase 2: Navigation & Hero ✅ (6/6)

1. Theme toggle: ☀️ → sun, 🌙 → moon ✅
2. Hero button: 🚀 → rocket (View Projects) ✅
3. Hero button: 📂 → github (GitHub) ✅
4. Hero button: 📧 → mail (Contact) ✅
5. Status badge: 🔍 → target (Open to opportunities) ✅
6. Status badge: 📍 → map-pin (Location) ✅

Phase 3: About Section ✅ (4/4 + 2 kept as emoji)

1. [~] Section header: 👨🏿‍💻 → KEEP EMOJI (personal identity)
2. [~] Education: 🎓 → KEEP EMOJI (personal touch)
3. Skills: 🤖 → bot (Robotics & AI) ✅
4. Skills: 🔧 → database (Data Engineering) ✅
5. Skills: 🌐 → globe (Backend/Web) ✅
6. Skills: 📱 → smartphone (Mobile) ✅

Phase 4: Client Work Section ✅ (2/2 + 2 kept as emoji)

1. Section header: 💼 → briefcase ✅
2. [~] SLIVER: 🍕 → KEEP EMOJI (brand identity)
3. [~] Vintage Wine: 🍷 → KEEP EMOJI (brand identity)
4. Client badge: 🏢 → building-2 ✅ (both cards)

Phase 5: Project Titles (0/10)

1. Drone: 🚁 → plane (custom drone unavailable)
2. Rover: 🔍 → search
3. Robotic Arm: 🦾 → hand or bot
4. Self-Driving: 🚗 → car
5. Spark: ⚡ → zap
6. Flink: 💰 → trending-up or dollar-sign
7. Todo: ✅ → check-circle
8. Project Mgmt: 📋 → clipboard-list
9. Weather: 🌤️ → cloud-sun
10. Bitcoin: ₿ → bitcoin

Phase 6: UI Elements (0/4)

1. Key Features: 🎯 → target
2. External links: 🔗 → external-link
3. Admin links: 🔐 → lock
4. Docs links: 📚 → book-open

Phase 7: Contact Section (0/3)

1. Section header: 📫 → mail
2. LinkedIn link: 💼 → linkedin
3. GitHub link: 💻 → github

Icon CSS:

.lucide-icon {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-right: 0.5em;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn .lucide-icon {
  margin-right: 0.4em;
}

📦 Version 2.1: Typography Enhancements

Status: 🔵 Future (0/6) Priority: Medium Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 2

Font Integration

1. Add Inter font (Google Fonts) - Modern & Professional
2. Add JetBrains Mono for tech badges and code
3. Implement variable font loading for performance
4. Update body font-family to use Inter

Font Alternatives (Optional)

1. Consider Outfit - Contemporary, geometric
2. Consider Space Grotesk - Tech-forward

Implementation:

<!-- Add to default.html -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.tech-badge, code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85em;
}

📦 Version 2.2: Color & Theme Refinements

Status: 🔵 Future (0/8) Priority: Medium Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 3

Modern Color Palette

1. Update primary color from #0366d6 to modern alternative
2. Consider Indigo 600 (#4f46e5) - Sophisticated
3. Consider Blue 600 (#2563eb) - Vibrant
4. Consider Violet 600 (#7c3aed) - Creative

Dark Mode Enhancement

1. True black background: #0a0a0a
2. Subtle card elevation: #111111
3. Softer borders: #1f1f1f
4. Softer primary: #818cf8

Gradient Headers

1. Add gradient text to section headers

   .section-header h2 {
     background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
   }
   

Color-Coded Sections (Optional)

#robotics { --section-color: #8b5cf6; }      /* Purple for AI/Robotics */
#data-pipeline { --section-color: #f59e0b; }  /* Amber for Data */
#fullstack { --section-color: #10b981; }      /* Emerald for Web */
#mobile { --section-color: #ec4899; }         /* Pink for Mobile */

📦 Version 2.3: Layout & Spacing Refinements

Status: 🔵 Future (0/7) Priority: Medium Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 4

Visual Hierarchy

1. Increase section spacing (60px from 25px)
2. Add more breathing room to section headers (50px margin)
3. Improve card grid gap (32px from 25px)

Card Grid Improvements

1. More consistent card sizing (minmax 340px)
2. Consider asymmetric Bento Grid layout for featured projects

Navigation Enhancements

1. Sticky section navigation
2. Improved section indicator

Bento Grid Layout:

.project-grid-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  gap: 24px;
}

.project-card.featured {
  grid-column: span 2;
  grid-row: span 2;
}

📦 Version 2.4: Animations & Micro-interactions

Status: 🔵 Future (0/8) Priority: Medium Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 5

Card Animations

1. Staggered fade-in-up animation for cards
2. Hover glow effects for project cards
3. Enhanced card lift on hover

Button Effects

1. Ripple effect on button click
2. Improved button hover transitions

Scroll Interactions

1. Smooth section reveal (IntersectionObserver)
2. Parallax effect for hero section

Profile Animation

1. Subtle breathing animation for profile image

Staggered Animation:

.project-card {
  animation: fadeInUp 0.6s ease forwards;
}

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }

Hover Glow:

.project-card:hover {
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 40px rgba(79, 70, 229, 0.1);
}

📦 Version 2.5: Accessibility

Status: 🔵 Future (0/8) Priority: High Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 6

Keyboard Navigation

1. Skip to content link
2. Enhanced focus-visible states
3. Focus ring on all interactive elements

Screen Reader Support

1. ARIA labels for all icons and buttons
2. Proper heading hierarchy audit

Visual Accessibility

1. Color contrast audit (WCAG AA: 4.5:1 ratio)
2. Reduced motion support (@prefers-reduced-motion)
3. High contrast mode support

Skip Link:

<a href="#about" class="skip-link">Skip to main content</a>

.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  padding: 10px 20px;
  background: var(--primary-color);
  color: white;
  z-index: 1000;
}

.skip-link:focus {
  top: 0;
}

Reduced Motion:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

📦 Version 2.6: Performance Optimizations

Status: 🔵 Future (0/6) Priority: High Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 7

Image Optimization

1. Add loading="lazy" to all images
2. Convert PNG/JPG to WebP format (25-35% smaller)
3. Add <picture> elements with WebP fallback

Asset Loading

1. Preload critical assets (profile image, CSS)
2. Defer non-critical JavaScript

Caching

1. Increase cache TTL for static assets

Lazy Loading:

<img src="./images/drone.gif" loading="lazy" alt="...">

WebP with Fallback:

<picture>
  <source srcset="./images/drone.webp" type="image/webp">
  <img src="./images/drone.gif" alt="...">
</picture>

📦 Version 2.7: Mobile Experience

Status: 🔵 Future (0/6) Priority: High Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 8

Navigation

1. Fixed bottom navigation bar for mobile
2. Improved hamburger menu with animations

Touch Interactions

1. Swipeable project cards
2. Larger touch targets (52px minimum height)

Content Organization

1. Collapsible project features using <details>
2. Condensed tech badges on mobile

Bottom Nav:

@media (max-width: 768px) {
  .mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--card-bg);
    display: flex;
    justify-content: space-around;
    padding: 12px 0;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 100;
  }
}

Touch Targets:

@media (max-width: 768px) {
  .btn {
    min-height: 52px;
    padding: 14px 24px;
  }
  
  .nav-menu a {
    padding: 12px 16px;
  }
}

📦 Version 2.8: Content & UX Polish

Status: 🔵 Future (0/6) Priority: Medium Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 9

Project Status Indicators

1. Add live/WIP/archived status badges
2. Animate “Live” status with pulse effect

Project Metadata

1. Project complexity badges (duration, difficulty)
2. Tech stack hover tooltips with descriptions

Engagement Features

1. “Available for Work” floating banner
2. Reading time indicators for case studies

Status Indicator:

<div class="project-status">
  <span class="status-dot live"></span> Live
</div>

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
}

.status-dot.live { background: #10b981; }
.status-dot.wip { background: #f59e0b; }
.status-dot.archived { background: #6b7280; }

📦 Version 3.0: Advanced Features

Status: ⚪ Optional (0/8) Priority: Low Source: UI_IMPROVEMENT_RECOMMENDATIONS.md Section 10

Interactive Elements

1. Interactive skills radar chart (D3.js or Chart.js)
2. Project filtering system (All, Client, Robotics, Data, Web)
3. View toggle (Grid/List)

Power User Features

1. Command palette (⌘K) for quick navigation
2. Keyboard shortcuts for navigation

Analytics

1. User engagement tracking
2. Scroll depth tracking

AI Features (Optional)

1. AI-powered project recommendations

Project Filtering:

<div class="filter-tabs">
  <button class="filter-btn active" data-filter="all">All</button>
  <button class="filter-btn" data-filter="client">Client Work</button>
  <button class="filter-btn" data-filter="robotics">Robotics</button>
  <button class="filter-btn" data-filter="data">Data</button>
</div>

Command Palette:

document.addEventListener('keydown', (e) => {
  if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
    e.preventDefault();
    openCommandPalette();
  }
});

📊 Section Content Summary

🎨 Theme Configuration

Light Mode

| Property | Value | |———-|——-| | Background | #ffffff | | Card Background | #f8f9fa | | Text Primary | #1a1a1a | | Text Secondary | #6c757d | | Primary Color | #0366d6 |

Dark Mode (Enhanced - V2.2)

| Property | Current | Proposed | |———-|———|———-| | Background | #1a1a1a | #0a0a0a | | Card Background | #2d2d2d | #111111 | | Border Color | #3d3d3d | #1f1f1f | | Text Primary | #ffffff | #fafafa | | Text Secondary | #a0a0a0 | #a1a1aa | | Primary Color | #58a6ff | #818cf8 | | Accent Color | #10b981 | #34d399 |

💰 Monthly Costs

📊 Codebase Stats

🚀 Getting Started

Local Development

# Using Docker (recommended)
docker-compose up

# Access:
# - Site: http://localhost:4000

Manual Setup

# Install dependencies
bundle install

# Run development server
bundle exec jekyll serve --watch

# Access: http://localhost:4000

Deployment

# Push to main branch (auto-deploys to GitHub Pages)
git push origin main

📝 Recent Updates

January 4, 2026

• V2.0 Task 1-3 Complete: Lucide Icons integration ✅
  • Added Lucide CDN to default.html
  • Replaced theme toggle emojis with sun/moon icons
  • Added .lucide-icon CSS class for consistent styling
  • Fixed 14 broken HTML anchor tags (missing closing quotes)
  • Verified icons rendering correctly in browser
• Roadmap Created: Integrated all tasks from UI_IMPROVEMENT_RECOMMENDATIONS.md
  • V2.0: 33 icon replacement tasks
  • V2.1-V2.8: 55 UI enhancement tasks
  • V3.0: 8 advanced feature tasks

January 2026 (Prior Work)

• Created comprehensive UI_IMPROVEMENT_RECOMMENDATIONS.md
• Documented 10 improvement categories:
  1. Icons: Emoji vs Lucide
  2. Typography Improvements
  3. Color & Theme Enhancements
  4. Layout & Spacing Refinements
  5. Animation & Micro-interactions
  6. Accessibility Improvements
  7. Performance Optimizations
  8. Mobile Experience
  9. Content & UX Polish
  10. Advanced Features

December 2025

• V1.4 Complete: Docker development setup
• V1.3 Complete: SEO & Performance optimizations
• V1.2 Complete: All project categories added
• V1.1 Complete: Client Work section with SLIVER & Vintage Wine

November 2025

• V1.0 Complete: Initial portfolio launch
• Jekyll setup with GitHub Pages
• Dark/Light theme implementation
• Responsive design across devices

🎯 2026 Goals

Q1 2026 (January - March)

• Complete V2.0 (Lucide Icons - 33 tasks)
• Complete V2.1 (Typography - 6 tasks)
• Complete V2.2 (Colors - 8 tasks)

Q2 2026 (April - June)

• Complete V2.3 (Layout - 7 tasks)
• Complete V2.4 (Animations - 8 tasks)
• Complete V2.5 (Accessibility - 8 tasks)

Q3 2026 (July - September)

• Complete V2.6 (Performance - 6 tasks)
• Complete V2.7 (Mobile - 6 tasks)
• Complete V2.8 (UX Polish - 6 tasks)

Q4 2026 (October - December)

• Evaluate V3.0 Advanced Features
• Add new client projects as completed
• Continuous content updates

📋 Priority Recommendations

Quick Wins (1-2 hours each)

1. ✅ Add Inter/Outfit font for premium feel
2. ✅ Implement Lucide icons for buttons (hybrid approach)
3. Add loading="lazy" to all images
4. Improve dark mode colors
5. Add focus-visible states

Medium Effort (4-8 hours each)

1. Full Lucide icon migration (in progress)
2. Staggered card animations
3. Mobile bottom navigation
4. Project status indicators
5. Enhanced hover effects

Larger Projects (1-2 days each)

1. Bento grid layout redesign
2. Interactive skills visualization
3. Project filtering system
4. Command palette feature
5. WebP image conversion + optimization

📋 Priority Legend

This roadmap is a living document and will be updated as the project progresses.

Reference: UI_IMPROVEMENT_RECOMMENDATIONS.md for detailed implementation code and explanations.