Skip to main content

I'm Jeanette, a curious Front-End Developer

I create mobile-first, responsive, and semantic web apps

Projects Resume

About

I love building tools that people can use to be more productive. The process of conceptualizing and researching the architecture of a web app is a thrilling adventrure, especially if it involves learning new skills.

In my adventures, I've learned:

  • Semantic HTML
  • CSS/SASS/BEM
  • Accessibility
  • Javascript/es6
  • API Calls
  • Light Node.js
  • Liquid
  • Shopify Theme Development
  • Web Components
  • React
  • Light Material UI
  • Light Figma
  • Light UX
  • Git

Projects

Recording of photobooth app being used to change the background of greenscreen images with spooky themes
  • React
  • React Hooks
  • Grommet
  • p5.js
  • Netlify

Halloween Photobooth App

A web app that replaces green screens with Halloween-themed backgrounds, which can be printed on photobooth style stickers.

Recording of app being used to generate schema tags for liquid files using Shopify's section architecture
  • React
  • React Hooks
  • React Beautiful DND
  • Polaris (Shopify)
  • Liquid

Dragquify

A drag and drop code generator for schema tags in Shopify's section architecture. Can also be used to prototype the output in Shopify's theme editor and test merchant experience.

I built this to learn Liquid, Shopify's theme section architecture, and to visualize how input settings appear to merchants in the theme editor.

Made before Shopify's Theme 2.0 update.

Recording of app being used to generate color choices by emotive words and through uploaded photos
  • React
  • Rebass React
  • Color Thief
  • Unsplash API
  • Environment Variables
  • Node.js
  • Express
  • Axios
  • Heroku

Mood Colors

A palette generator with a twist - create palettes from moods. Users can search suggested feelings or create palettes from uploaded images.

A palette comprises of the three most dominant colors generated by Lokesh Dhakar's Color Thief.

Per Unsplash's terms, to secure my API key, I built a simple API with Express, Axios, and environment variables.

This was the first React app I built, before learning about accessiblility and responsiveness.

Recording of interactions on portfolio site, which include a floating action button to scroll up, sidebar nav, and contact
  • Semantic HTML
  • Javascript
  • Web Components
  • Intersection Observer
  • Formspark
  • Fetch API
  • SASS
  • BEM

Portfolio

Mobile-first portfolio built with semantic elements. Features a skipnav and dark theme toggler for accessibility, plus a scroll to top button for mobile users. Follows BEM naming conventions for styling.

Screenshot of plate UI being updated
  • React
  • React Context
  • React Router
  • Material UI
  • Progressive Web App
  • Mood Colors
  • Netlify

Baking Buddy

A pocketbook of baking substitutes in the form of an interactive app. The themes were create using another project, Mood Colors, to pick palettes inspired by pastries.

Image of plate UI being updated
  • UX
  • Wireframing
  • Balsamiq
  • Personas
  • Storyboarding
  • Task Analysis
  • User Testing
  • jQuery Mobile

Battle of the Plates

Team project. Through interviewing students, we discovered that most students did not have balanced diets and built profiles of potential users. Our tentative solution was to design a meal tracking app. The main interface was an interactive plate based on food groups. After numerous iterations of testing different prototypes, the final protoype incorporated gamified elements.

Contact