Portfolio

urAtlas Odyssey

• Tech: React, SQLite, Express.js, Firebase Auth, Node.js
• Role: Frontend Engineer (Full-Stack Prototype)
• Link: Available upon request

This was my first full-stack build where I owned the entire system, and I used Cursor extensively to accelerate development. I handled the frontend architecture and React implementation myself (that's my forte), but leveraged Cursor's AI assistance for backend scaffolding, Express routing, and SQLite setup. The result: I shipped a complete full-stack app in weeks instead of months.

Doing all this was a real eye opener. The future of software development isn't extensive hand coding and memorization of abstruse syntax, it's having the experience and talent to architect, direct, and debug systems as they're built autonomously.

The program is a riff on the popular 12 Week Year concept, bringing clarity and intensity to a task so it can be completed in record time. It helps users do that by setting meaningful goals, tracking weekly execution, and getting visual feedback via momentum indicators, check-in dashboards, and self-assigned scoring.

The dashboard UI required managing complex state across multiple views including momentum scores, check-in history, and weekly progress tracking. I used React Context for global state and kept component-level state minimal, which made the whole system far easier to understand and debug.

QuestRex Character Generator

• Tools: React.js, SASS, WordPress Plugin API
• Role: Frontend Developer
• Link: https://questrex.biz/character-builder/
• Repository: https://github.com/Citizenfitz/character-builder

For all the nostalgia over the "good old days" of simpler JavaScript, I can't imagine building this in anything other than React. There's just TOO much state management. Character attributes that affect available talents, talents that modify stats, talents that are required for other talents, etc. In plain JavaScript it would've been a Kafkaesque thicket of spaghetti code.

I deliberately avoided a backend database to keep it portable and modular. Everything is stored in plain JSON or Markdown files, which are parsed directly into the page. Clunky? Well... maybe a little. But more often than not, the KISS principle (Keep It Simple, Stupid) wins over being devastatingly clever. With no server requirements, no database migrations, and no deployment complexity it can be just dropped in and it works.

The WordPress plugin integration was an interesting challenge. React apps usually want to own the whole page, but here I needed to play nicely with WordPress's ecosystem. The solution was building a clean boundary layer that handles the React mount/unmount lifecycle without conflicting with other plugins or the theme.

QuestRex Backstoryr

• Tech: React, xAI API, WordPress integration
• Role: Full-Stack Developer
• Link: https://questrex.biz/backstoryr/
• Repository: https://github.com/Citizenfitz/backstoryr

This was my first foray into agentic AI development and it turned out quite well. Originally I built it using plain JavaScript with massive random tables, but the results never meshed together into anything coherent. When modern LLMs arrived, I tried using them directly, but the results were equally nonsensical and crafting a detailed prompt for each character took more effort than it was worth.

I realized that combining both approaches could work: use structured data (user-selected traits) to constrain the AI output. The frontend manages the trait selection quickly, passes that to the AI for narrative generation, then displays results where they can be refined further. The hybrid system produces coherent backstories without requiring users to become prompt engineers. The technical challenge was managing the async API calls and handling partial regeneration—users should be able to keep parts they like while regenerating others. React's component model made this much easier than the vanilla JS approach I started with.

Consumer Product Safety Commission (CPSC)

• Tech: React.js, SASS, Axure, Section508 accessibility testing
• Role: Senior UX / Front-End Developer @ Publicis Sapient

The most vexing part of this project wasn't the React code; it was extracting actual requirements from fuzzy internal processes. The client knew exactly how to do their job but had a much harder time spelling out the specific steps and identifying the edge cases that had crept into their workflows. We had to build something flexible enough to handle requirements that kept shifting as they clarified their own processes.

From an architecture standpoint, this meant designing components that could adapt without full rewrites and keeping the CSS centralized instead of component-based. When a new requirement surfaced (which happened frequently), we could often handle it by reconfiguring existing components rather than building new ones from scratch.

Accessibility is non-negotiable for federal work, so I built it in from the start with quality markup and plugins with built-in compliance rather than bolting it on later. That upfront investment saved us from expensive remediation work and made the Section 508 compliance audit relatively painless.

HRSA Health Workforce Connector

• Tech Stack: Angular, SASS, Accessibility Standards, Axure
• Role: Senior Frontend Developer @ Publicis Sapient

This project was a bear. We started with the beta version of Angular, had to recode the entire thing when 1.0 was released, and then reworked large swaths repeatedly until Angular finally settled into a stable form. Launching a major project with a novel technology was, perhaps, an ill-advised decision from the higher-ups. But with perseverance and the grace of Stack Overflow we pulled it off.

By the time I rolled off, the app was motoring along smoothly. The project crises made for very rapid learning. Towards its end I was working with the UX team to create style and component conventions across the various sub-apps and that was a satisfying close to the ride.

PenFed Credit Union Mobile App

• Tech Stack: PhoneGap (Cordova), HTML5, CSS3, JavaScript
• Role: Senior Frontend Developer @ Publicis Sapient

This was a hybrid mobile app built with PhoneGap for Pentagon Federal Credit Union. I worked on the front end and was largely responsible for the CSS and styling.

That task turned out to be far more complicated than expected, thanks to the peculiarities of various mobile OSes and browsers. Font rendering, layout, and z-index issues were my bane - particularly on older browsers. I remember a teammate joking that it would've been cheaper to just buy complaining users new phones than spend days figuring out why something wasn't rendering correctly on a three-year-old Android device.

The final product was solid but hammered home why mobile development needed to move away from the hybrid approach. They introduce too many limitations and whatever time you save on initial development you'll likely squander on bug fixes. Native apps offer far more control and consistency.

Department of Energy HR Website

• Tech Stack: HTML, CSS, JavaScript, 508 Standards
• Role: Lead UX & Senior Frontend Developer @ DST/SDSE

This was a complete redesign of the Department of Energy's HR office. I knew I was in uncharted territory when I was directed to rename the site to "The Office of the Chief Human Capital Officer." Just rolls off the tongue, right?

Bureaucratic tape aside, this job was mostly an exercise in getting a large number of stakeholders to agree on what actually needed to be built. The actual building of the site was rather pedestrian: a static HTML and CSS affair with careful attention to accessibility compliance. This remains my peak people-skills project, and in the end, they served me well. Everyone agreed. Everyone liked what was built. And no one saw a problem with "The Office of the Chief Human Capital Officer.". Mission accomplished.

Fun project story: While waiting to show my designs to a director for sign-off, I sat outside his office listening to him gushing about a great new company that was going to revolutionize solar energy. The company? Solyndra.

NREPP Online Training Course

• Tech Stack: HTML, CSS, JavaScript, WebMerge
• Role: Lead Frontend Developer @ MANILA Consulting Group

Of all the work I've done over the years, this was probably my favorite project. I got to handle all the design and most of the coding—pure creative control, which is a rare thing. We had a team of PhDs designing the course content and writers shaping the copy, while I turned it into a working website.

The interesting technical challenge came when we learned the course had to be usable on CD-ROM (those were the days, eh?). I discovered magical WebMerge tool from 4th World Software. It let us "mail-merge" our database-driven course into a static, portable site that could run off a disc. I'm still a fan of WebMerge and wager that many sites built today would work better with this approach.

I think I loved doing this project because I got to be the captain of all things Web. I chose the tech stack, implemented the majority of the code, designed the interface, and handled the graphics. This was right before websites became too complicated for one person to field it all themselves. Interestingly, with the new AI-assisted coding we're kind of circling back to that paradigm again.