The USA National Parks Explorer is a React application that allows users to explore U.S. National Parks through an interactive map. The app features a search bar, state dropdown, and an Information Box displaying detailed park data, fetched from the National Parks Service API. Users can zoom, select states, and click on parks to view information such as location, activities, weather, and more, all while ensuring a smooth, user experience.

The goal for the USA Explorer user experience is to create an intuitive experience for exploring the U.S. National Parks. The interactive map uses a terrain-themed basemap and AlbersUSA projection, which adjusts dynamically with clickable circles (Parks) and US state selection. 

A search bar with search recommendations and a US state dropdown menu will allow users to easily find parks. Upon selection, park details such as title, town, state, images, description, activities, and others, will be displayed, sourced from the National Parks Service API. Map control buttons ensure accessibility, while the map zooms to selected parks for an immersive, positive user experience.

The Map component (Map.js) renders a zoomable US map with park locations – using the D3.js geoAlbersUSA() projection. It allows users to zoom in on specific states or parks, providing interactive features like tooltips and click-based park selection. The map also dynamically highlights the currently selected state and park.

Essential Functions

fetchData(): Fetches park data from an external API and updates the component’s state with the fetched data.

zoomBehavior(): Creates a D3 zoom behavior instance to handle zooming in and out of the map.

updateCircles(zoomLevel): Updates the size of the park circles based on the current zoom level.

zoomToPark(park): Zooms into a specific park, centering the map on its location.

zoomToState(state): Zooms into a specific state, centering the map on its center point.

handleZoomIn(): Zooms in on the map.

handleZoomOut(): Zooms out on the map.

handleReset(): Resets the map view to its initial state.

The Information Box component (InfoBox.js) manages the display of park information. It dynamically updates the displayed park based on user selection, fetching relevant details such as location, description, images, activities, weather, contact information, and directions. The component employs smooth animations to transition between parks, ensuring a smooth user experience.

Essential Functions

getStateFullName(stateAbbreviation): Converts a state abbreviation (e.g., CA) to its full name (e.g., California).

fetchParkInfo(parkCode): Fetches information about a park using the provided code and updates the state with the retrieved data or any errors.

toggleActivities(): Toggles the visibility of the park’s activities list.

The NavBar component (NavBar.js) provides a search bar for finding parks and states, as well as a dropdown for selecting states. It fetches and processes park data to enable searching by both state and park name. When a user selects a state or park, the component triggers appropriate callbacks to update the map and other parts of the application.

Essential Functions

getStateFullName(stateAbbreviation): Converts a state abbreviation to its full name.

NavBar(): Renders the navigation bar, handles search functionality, state selection, and park selection.

fetchParkStates(): Fetches park data and populates a state map with parks grouped by state.

handleClickOutside(): Closes the search suggestions when clicking outside the search container.

handleSearchChange(): Updates the search term and triggers suggestions.

handleSearchSelect(): Selects an item from the suggestions, updates the state, and triggers relevant callbacks.

handleStateChange(): Updates the selected state and triggers the onStateSelect callback.

In June 2020, I launched dannyhomanmedia.com to showcase my landscape photography collection. Over time, I became immersed in web development and transitioned my site to a fully customized WordPress theme—designed and developed entirely from scratch. Today, my website features my photography collection, a portfolio of web development projects, and an online print shop.

Brand colors

• LIGHT BLUE (#00A4A2), 
• DARK BLUE (#003A3A), 
• SANDALWOOD (#E59C59), and 
• MAROON (#4B1521)

Typography 

• Montserrat for headings
• Quicksand for paragraphs. 

The user interface embraces a sleek, dark-themed design, emphasizing smooth transitions and the integration of my photography alongside the brand’s colors and fonts for a cohesive and visually engaging experience.

Photo Page UI

Visitors can explore images organized by collections, with the landing page highlighting my featured works. Each photo includes titles and location details, revealed gracefully on hover, complemented by smooth tab navigation and dynamic underline animations to enhance usability.

Web Development Projects UI

Ensures project titles, dates, tools, overviews, and screenshots are prominently displayed. Visitors can delve deeper into individual projects through dedicated tabs.

Print Shop 

Maintains simplicity and adheres to the brand guidelines, ensuring consistency and seamlessness throughout the user’s shopping experience.

The development of my custom WordPress theme began in my local environment using Docker to run my local image container, along with phpMyAdmin and MariaDB for database management. I set up the WordPress development environment to focus on streamlined theme development tailored to my website goals – both for myself as the creator, and for the user. 

CSS

I built a custom CSS library tailored specifically for my page templates and WooCommerce integration. I used the following CSS techniques to enhance the user experience and maintain brand consistency throughout the website: 

• Animations and keyframes to create smooth transitions and engaging interactions
• Pseudo-elements and pseudo-classes for added styling flexibility, 
• Media queries to achieve fully responsive layouts across devices
• The nth-child selector to apply targeted animations and styling to specific elements

Content Management

I used Advanced Custom Fields (ACF) to implement dynamic content management solutions and Custom Post Types (CPTs). This approach enabled me to showcase web development projects and photo collections using CPTs, offering a structured and organized way to present detailed information within the theme. By integrating these tools and prioritizing my CMS functionality, my theme development process achieved both flexibility and ease of managing content.

Additionally, I push all my WordPress theme code changes to a remote repository on GitHub, which can be accessed here.

I managed, designed, and supported development of the website for the Clean Lighting Coalition (organized by CLASP), a global initiative aimed at eliminating toxic lighting through the Minamata Convention on Mercury.

In November 2023, at the Minamata Convention on Mercury’s Fifth Conference of Parties (COP5), delegates from 147 countries reached a historic agreement to phase out fluorescent lighting globally by 2027. The lighting-related decisions made at Minamata COP4 and COP5 are expected to eliminate 193 tonnes of mercury pollution, prevent 2.963 gigatonnes of CO2 emissions, and save US$1.23 trillion in electricity costs by 2050.

Learn more about the campaign here.

In collaboration with the research, policy implementation, leadership, and communications teams, I helped build the site map, develop content, and integrate key features, including a blog, research articles, press releases, interactive maps (via Datawrapper), and other data visualizations (via Flourish).

My involvement with the campaign also led to a trip to Brussels, Belgium, in 2022, where I supported leadership during negotiation events with the EU Commission.

One of my earliest published coding projects involved creating an interactive webpage that highlighted the connection between LED implementation and the United Nations’ Sustainable Development Goals (SDGs). 

A research specialist on our team suggested incorporating an educational “Flip Card” component to boost interactivity. I was able to integrate custom HTML, CSS, and JavaScript to craft an engaging interactive experience for users exploring the links between the SDGs and clean lighting/LEDs. 

For certain countries like Japan, aligning our mission with the SDGs was a central topic of discussion, making this connection particularly crucial.

View the web component here.

View the code here.

As the Web Developer at Studio 702 Media Management, I led the website redesign and migration for Rentmeister – a family–run HVAC and plumbing business in Northern Utah.

Rentmeister was in need of a website redesign, as their previous website design was outdated and suboptimal. Additionally, they needed to migrate their site domain from their previous provider to a new GoDaddy account. Additionally, I photographed some stock images for them.

Audit

• Assessed the old website’s design, and user experience.
• Identified areas needing improvement, such as outdated visuals and subpar navigation.

Consultation

• Worked closely with Rentmeister’s owners to understand their business goals and user needs.
• Reviewed their suggestions and incorporated their preferences into the design.
• Confirmed the integration of essential third-party APIs, including:

• ScheduleEngine: Online scheduling system.
• Podium Chat: Live customer communication tool.

Development Stages

• Built a staging site to review and test design updates.
• Integrated custom features using Wix Dev Tools for API scripts, CSS styling, and analytics tracking.

Migration  & Launch

• Coordinated with the previous hosting provider to transfer the domain to our GoDaddy account.
• Updated and managed DNS records, including A, CNAME, TXT, SRV, MX, and NS records.

Design

• Focused on usability, ensuring key features were easy to find (e.g., online scheduling, phone number, and service search).
• Used client’s color scheme of red, white, and blue.
• Incorporated imagery from both in-house and stock photo sources.

Content Strategy

• Studio 702 digital team and client collaborated to create informative pages to educate users about services and strengthen the site’s search visibility.

Development

• Used Wix Dev Tools to:

• • Customize CSS styling.
  • Integrate ScheduleEngine and Podium Chat APIs.
  • Add Google Analytics and Google Ads tracking.