LOADING

Front-End Development

Interactive Map

National Conservation Areas | Utah

January 2024 - February 2024

    Tools used: React, D3, Leaflet, CSS


  • Implemented an interactive map component that re-renders an information box component with national conservation area names, descriptions, activities, and images, depending on user selection.
  • Integrated GeoJSON, Leaflet, and D3 libraries to create an interactive map showcasing Utah's conservation areas.
  • Used Axios for asynchronous HTTP requests to fetch data about nationally protected areas in Utah using National Parks Service API.
  • Utilized useState and useEffect hooks with dependency arrays to manage side effects and re-render components.
  • Hosted app on Netlify with GitHub integration for streamlined deployment

Reservations & Online Ordering

Little Lemon Restaurant

January 2024 - February 2024

    Tools used: React, CSS


  • Set up a React development environment and enabled commit changes to a remote GitHub repository.
  • Optimized user experience by using advanced CSS methods such as keyframe animations, pseudo-classes, and media queries to execute a responsive design.
  • Implemented client-side validation for date input (“required” attribute), number of guests (min=1), and “e.preventDefault()” to prevent the form from being submitted if validation fails.
  • Used JavaScript features and methods, such as arrow functions, array.map, template literals, object destructuring, and promises, for efficient and dynamic functionality in components.

Clean Lighting Flip Cards

February 2023 - April 2023

    Tools used: HTML, CSS, JavaScript, Figma, Canva, Adobe Creative Suite, WordPress


    My Role:

  • Used HTML to structure flip cards and paragraph content, CSS for styling and mobile-responsiveness, and JavaScript to trigger animations when elements enter the viewport.
  • Leveraged the “full-width feature” component of Teal Media’s Archie platform to integrate custom HTML/CSS/JS.
  • Collaborated with program and communications teams to finalize written content.

Portfolio Website ( you are here 🤠)

July 2020 - Present

    Tools used: HTML, CSS, JavaScript, PHP, WordPress, Adobe Creative Suite


    My Role:

  • Developed a WordPress theme from scratch to showcase my portfolio.
  • Used CSS media queries for mobile responsive design.
  • Dynamically added content using WordPress PHP loop.
  • Migrated domain from SquareSpace to WordPress (BlueHost).

Photography Portfolio

July 2020 - Present

    Tools used: PHP, HTML, CSS, WordPress, Adobe Lightroom


    My Role:

  • Used a custom (WP_Query) to retrieve and display all portfolio items (posts) of the "portfolio" post type.
  • Organized the photos into columns, with each photo clickable to enlarge.
  • Dynamically generated HTML markup for displaying the portfolio items, organizing items into columns, and including the image as clickable elements (< img > tags) and the location as text overlaying each image.
  • Included a fallback message ("No portfolio items found.") in case there are no portfolio items to display.