KatieHunt

🎉 You Found It!

Congratulations! You discovered the secret Konami code.
↑ ↑ ↓ ↓ ← → ← → B A

Product Designer & UI Architect

Engineering Exceptional Experiences

I specialize in crafting high-performance applications with modern frameworks and cutting-edge design systems, turning complex problems into elegant, user-centered solutions.

0
Satisfaction
~/portfolio/about.js
const design_engineer = {
name: 'Katie Hunt',
roles: ['Product Designer', 'UI/UX Designer', 'Frontend Engineer'],
stack: {
frontend: ['React', 'Next.js', 'TypeScript', 'Tailwind CSS', 'HTML', 'CSS'], design: ['Wireframing', 'Prototyping', 'User Flows', 'Design Systems'],
creative: ['Cursor', 'Claude', 'ChatGPT']
},
passion: 'Building the future'
};
$
"Excellence is never an accident. It is always the result of high intention, sincere effort, and intelligent execution; it represents the wise choice of many alternatives - choice, not chance, determines your destiny."
― Aristotle

Technical Expertise

Modern tools and frameworks I use to build exceptional products

⚛️

Frontend Development

Building responsive, performant web applications with modern JavaScript frameworks

React Next.js TypeScript Vue.js Vite Tailwind CSS3 HTML
🎨

UI/UX Design

Creating intuitive interfaces with attention to detail and user experience

Figma User Research A/B Testing Prototyping Responsive Design Wireframing User Flows Design Systems
💻

Programming & Data Tools

Programming languages, analytics, and specialized scripting tools

Python SQL Pine Script Excel Pandas NumPy Data Analysis & Visualization
🛠️

Dev Environments

Modern development tools and integrated environments

Cursor PyCharm VS Code Google Colab Jupyter Notebook Claude Windsuf Copilot
🎬

Creative & Visual Tools

Professional tools for content creation and visual design

DaVinci Resolve PowerPoint Prezi Canva Sora 2 Nano Banana Veo 3 Adobe Photoshop
🔧

Development Workflow & Quality Assurance

Professional development practices ensuring code quality, collaboration, and seamless user experiences across all devices

Git & GitHub Debugging Cross-Browser Testing Responsive Design
🔄 Version Control Proficient

My Approach to Application Architecture

A visual breakdown of my system design approach: first principles thinking, iterative refinement, and strategic automation.

Application Architecture Thinking Process Infographic

How I Approach Design

I design with a systems mindset, balancing users, business, and technology to deliver scalable, impactful solutions.

1. Research (Understand)

Learn what users need and why. Use interviews, data, and audits. Get clear insights to avoid guessing.

2. Problem Definition (Define)

Turn insights into a clear problem. Create personas and journey maps. Get everyone aligned on the goal.

3. User Journey Mapping

Map the user's path from start to goal. Find friction and opportunities early.

4. Design Explorations (Ideate & Prototype)

Explore ideas, sketch, and build prototypes. Deliver solutions that balance usability and impact.

5. Usability Testing & Validation (Test)

Test with real users. Get feedback. Refine for clarity and accessibility.

6. Handoff and Monitoring (Implement)

Implement specs and design systems. Monitor after launch so designs perform.

Featured Projects

A collection of my work showcasing my technical expertise

DocuConvert Pro: PDF ↔ DOCX Converter

Document converter tool with two modes (DOCX ↔ PDF): quick in-browser conversion for text-heavy files, or higher fidelity. Web and desktop application; files stay off the cloud on the fidelity path.

Case Study

Problem Solved

People need PDF ↔ Word conversion without uploading files to the cloud, especially for sensitive or internal documents. Cloud converters add privacy, safety risk and compliance risk; in-browser tools are fast but can lose complex layout. Office-only workflows are awkward to automate. DocuConvert Pro keeps conversion local on the computer with privacy intact.

Key Features

  • ➤ Convert Word Docs to PDF
  • ➤ Convert PDF to Word Docs
  • ➤ High-fidelity conversions
  • ➤ Personal web and desktop application solution
React 19 Vite 8 Tailwind CSS 4 Electron 34 Node.js Lucide React

CodeVault: Secure Code Repository Management System

Secure code repository with encryption, advanced search, syntax highlighting, and seamless project organization.

Case Study

Problem Solved

Provides secure, encrypted storage for code snippets and repositories locally on your device. Protects sensitive code with password authentication while keeping it organized and searchable.

Key Features

  • ➤ Master password authentication
  • ➤ Code snippet management for 20+ languages
  • ➤ Advanced search and filtering
  • ➤ Project organization with custom colors
  • ➤ File tree navigation with syntax highlighting
  • ➤ IndexedDB storage for large collections
  • ➤ Real-time KPI dashboard
React 18 Crypto-JS IndexedDB Prism.js React Router

CryptoVault: Crypto Wallet

I designed and built CryptoVault end to end from product concept and UX through UI craft and front-end implementation. The result is a high-fidelity crypto wallet spanning dashboard, portfolio, history, security, and preferences, with realistic core flows.

Case Study

Problem Solved

Building the wallet end-to-end removes reliance on third-party custody and gives full control over security, data, and feature design. It delivers a realistic, self-contained wallet experience where users can buy, send, and receive crypto directly inside the app rooted in trust, autonomy, and customizable flows, all without requiring external services.

Key Features

  • ➤ Full wallet experience across Dashboard, Portfolio, History, Security, and Settings
  • ➤ Interactive send, buy, receive, swap, and export-style flows
  • ➤ Client-side persistence for user preferences and settings via localStorage
  • ➤ Structured to run as a standalone static build and inside a React app
  • ➤ Polished UI for documentation and portfolio presentation
React 19 Create React App JavaScript (ES6) HTML5 CSS3 Testing Library Jest

Digital Trading Playbook

A web application for professional traders to document, organize, and manage trading strategies. Features PIN-protected access, advanced search and filtering, performance tracking, and an institutional-grade interface for managing personal or team trading playbooks.

Case Study

Problem Solved

Centralizes trading strategies into one secure, organized platform. Replaces scattered notes and spreadsheets with a professional system for documenting trade rules, tracking performance metrics, and quickly referencing strategies during trading sessions.

Key Features

  • ➤ PIN-protected authentication with auto-lock
  • ➤ Dashboard with stats, search, filtering, and sorting
  • ➤ Grid/list view modes
  • ➤ Play Editor (create, view, edit, delete, duplicate)
  • ➤ Multi-theme system (Dark, Light, Neon)
  • ➤ Performance tracking with charts
  • ➤ Keyboard shortcuts
  • ➤ Data export/import (JSON)
React 18 React Context API Recharts Lucide React CSS Variables

PromptVault: AI Prompt Library Manager

Organize and track AI prompts with advanced search, usage analytics, and intelligent categorization.

Case Study

Problem Solved

Organizes and manages AI prompts in one centralized library. Eliminates the frustration of recreating effective prompts by providing searchable categories, usage tracking, and insights into which prompts work best.

Key Features

  • ➤ Multi-page routing (Library, Favorites, AI Insights, Settings)
  • ➤ Dynamic category management
  • ➤ AI Insights and Analytics dashboard
  • ➤ Search with suggestions and filtering
  • ➤ Data export/import functionality
  • ➤ KPI dashboard with usage stats
HTML5 CSS3 Vanilla JavaScript

Teaching Portfolio: Multi-Format Artifact Viewer

My teaching portfolio showcasing Jupyter notebooks, PowerPoints, PDFs, and curriculum documents in a unified, accessible interface.

Problem Solved

Showcases diverse educational materials (notebooks, presentations, PDFs) in one accessible platform. Eliminates the need for multiple apps or downloads by rendering all content directly in the browser with full accessibility support.

Key Features

  • ➤ Multi-format viewer (PDFs, PowerPoints, Jupyter notebooks)
  • ➤ Interactive project filtering by category
  • ➤ GSAP scroll-triggered animations
  • ➤ Email modal with click-to-copy
  • ➤ WCAG-compliant accessibility
  • ➤ Responsive mobile design
HTML5 CSS3 Vanilla JavaScript GSAP pptxjs

HabitTracker: Personal Habit Tracking Application

Build better habits with progress tracking, goal achievements, and smart reminders.

Problem Solved

Helps users build and maintain consistent habits through visual progress tracking and motivational feedback. Makes habit formation easier with clear data visualization and achievement milestones.

Key Features

  • ➤ Habit dashboard with completion indicators
  • ➤ Streak counters with animated numbers
  • ➤ Weekly progress charts
  • ➤ Achievement badges system
  • ➤ Dark/light theme toggle
  • ➤ Responsive mobile-first design
React 18 GSAP JavaScript CSS3 ScrollTrigger

PassVault: Secure Password Management Application

Secure local password manager with categories, instant search, and multiple themes. No server required.

Problem Solved

Keeps passwords secure and organized locally on your device without relying on cloud services. Eliminates the hassle of forgetting passwords while maintaining complete privacy and control over your data.

Key Features

  • ➤ Dynamic category management
  • ➤ One-click password copying
  • ➤ Real-time search functionality
  • ➤ Multiple theme options
  • ➤ Confirmation modals for destructive actions
HTML5 CSS3 Vanilla JavaScript CSS Grid

FinTech Dashboard

Real-time financial dashboard with TradingView charts, WebSocket data streams, and a user-intuitive interface.

Problem Solved

Consolidates real-time financial data into a single, user-friendly dashboard. Simplifies complex market information with professional charts and technical analysis tools accessible from any device.

Key Features

  • ➤ Real-time WebSocket connections
  • ➤ Professional charts with technical indicators (SMA, EMA, Bollinger Bands, RSI, MACD)
  • ➤ TradingView integration
  • ➤ Responsive mobile-first design
  • ➤ Optimized performance for 1000+ data points
React 18 TypeScript Vite Tailwind CSS Zustand TradingView

Navigation Options Showcase

A catalog of six modern navigation options designed to offer unique variations in user experience.

Problem Solved

Demonstrates modern navigation patterns that balance functionality with clean design. Showcases solutions for organizing content efficiently while providing quick access to features across different screen sizes.

Key Features

  • ➤ Six navigation patterns (floating dock, morphing header, radial menu, command bar, slide-out panel, tabbed interface)
  • ➤ Glassmorphism effects and gradient backgrounds
  • ➤ Smooth animations and transitions
  • ➤ Accessibility features and keyboard shortcuts
  • ➤ Responsive design
React 18 JavaScript Tailwind CSS HTML5 CSS3 SVG

Interactive Game

A fully playable platformer game built with vanilla JavaScript and Canvas API

Get In Touch

Let's build something great together.