nafi@portfolio:~$
bash — ~/projects/platform-tooling
$cd ~/projects/platform-tooling && cat summary.txt
Frontend redesign of a digital reader platform with mobile-first accessibility and red-themed brand identity. Built custom CSS "glowing badge" components for membership tiers and Python tools ("Sleepy Stitcher", "BubbleTagger") cutting image processing & tagging time by 47% for localization.

WEB PLATFORM UI/UX & TOOLING

Frontend Developer & Tool Maker · #e4d0a17 frontend
React · CSS · Python github.com/sleepyhead000
~/projects/platform-tooling $

cat README.md

README.md
$cat overview.txt
Led the frontend redesign of a content-heavy digital reader platform. The legacy UI was desktop-first, low contrast, and inaccessible on mobile. Delivered a mobile-first, WCAG 2.1 AA compliant redesign with a distinct red-themed brand system. In parallel, built two internal Python CLI tools that automated repetitive image-stitching and tagging workflows for the localization team, reducing their processing time by 47%.
$cat redesign.txt
React + CSS Modules migration from legacy jQuery templates. Implemented a design token system (colors, spacing, typography) consumed via CSS custom properties. Mobile-first breakpoints: 320px, 480px, 768px, 1024px, 1440px. All interactive elements meet 48dp touch targets. Focus-visible outlines use the brand amber. Reduced JS bundle by 38% via code-splitting and tree-shaking.
$cat badges.txt
Designed "glowing badge" component system for membership tiers (Free, Premium, VIP). Pure CSS: radial-gradient glow animations, reduced-motion safe, dark/light theme aware via prefers-color-scheme. Badges render as inline elements with ARIA labels. VIP tier adds subtle pulse animation (respects prefers-reduced-motion). Increased premium tier click-through by measurable margin.
$cat tools.txt
Sleepy Stitcher: CLI that takes directories of page scans, detects gutter margins via edge detection, stitches spreads into single images, outputs WebP with configurable quality. BubbleTagger: OCR-assisted speech bubble detector — runs Tesseract on stitched pages, outputs JSON with bubble coordinates + text for translation handoff. Both tools wrapped in a Typer CLI with rich progress bars.
~/projects/platform-tooling $

ls -l features/

redesign
Mobile-first React · WCAG 2.1 AA · CSS token system · 38% bundle reduction
brand
Red theme system · CSS custom properties · dark/light via prefers-color-scheme
badges
Glowing tier badges (Free/Premium/VIP) · pure CSS · reduced-motion safe
stitcher
Sleepy Stitcher · gutter detection · spread stitching · WebP output
tagger
BubbleTagger · Tesseract OCR · bubble coords + text JSON export
impact
47% time reduction for localization image pipeline
~/projects/platform-tooling $

cat stack.yaml

frontend
React 18 · CSS Modules · CSS custom properties
tooling
Python 3.10+ · Typer (CLI) · Rich (progress)
image
OpenCV (edge detection) · Pillow · Tesseract (OCR)
build
Vite · ESLint · Stylelint · Prettier
testing
Vitest · React Testing Library · Playwright (e2e)
accessibility
axe-core · manual screen reader testing (NVDA/VoiceOver)
~/projects/platform-tooling $

git log --oneline

#f0e1d2cfeat/tokens

Design token system & CSS custom properties

CSS Modules · CSS Variables
  • Centralized tokens: colors (brand, semantic), spacing scale, type scale, radii, shadows.
  • Theme switching via data-theme attribute; respects prefers-color-scheme.
  • Tokens exported as JSON for potential Figma sync (design-dev handoff).
#e1d2c3bfeat/mobile

Mobile-first responsive rewrite

React · CSS Modules
  • Fluid typography using clamp(); container queries for component-level responsiveness.
  • Drawer navigation with focus trap; skip-to-content link; landmark regions.
  • All touch targets ≥ 48dp; tap-highlight-color transparent for custom feedback.
#d2c3b4afeat/badges

Glowing membership badge components

CSS · React
  • Three variants: Free (subtle), Premium (amber glow), VIP (pulse + teal accent).
  • Animation via @keyframes with prefers-reduced-motion media query guard.
  • ARIA-labeled; renders as inline-flex for seamless text flow integration.
#c3b4a59tool/stitcher

Sleepy Stitcher — batch image pipeline

Python · OpenCV · Pillow · Typer
  • Recurses input dir; groups files by prefix; detects gutter via Sobel edge density.
  • Stitches left/right pages into spreads; auto-crops whitespace; exports WebP.
  • Configurable quality (default 85), max dimension, output naming template.
#b4a5968tool/tagger

BubbleTagger — OCR-assisted bubble detection

Python · Tesseract · OpenCV · JSON
  • Runs Tesseract on stitched spreads; filters detections by aspect ratio + confidence.
  • Outputs GeoJSON-like structure: {page, bubbles: [{bbox, text, confidence}]}.
  • CLI flags: --lang, --min-conf, --preview (draws boxes on annotated image).
#a596877perf/bundle

Bundle optimization & CI gates

Vite · Rollup · Vitest · Lighthouse CI
  • Route-level code splitting; vendor chunk hashing for long-term caching.
  • Tree-shaking unused icon sets; dynamic import for heavy editors.
  • Lighthouse CI budget: JS < 170KB gzipped; fails PR on regression.