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.

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.

This project features an interactive map that showcases biking trails around Salt Lake City, including nearby areas like Farmington, Provo, and Park City. It highlights various biking infrastructure and features such as protected bike lanes, sweeping bike lanes, on-road bike ways, and bike racks.

The map also displays points of interest, historic sites, public art, parks, benches, and more.

Users can customize their experience by toggling different layers to explore different aspects of the city, such as bike infrastructure and public art, with detailed information shown on click.

• Data Collection and Preparation: The map integrates data from OpenStreetMap (OSM) and Salt Lake City’s open data portal via ArcGIS. I used Overpass Turbo to extract OpenStreetMap data and convert it into GeoJSON files for further use in the app.
• Map Building: Using ArcGIS, I mocked up the initial map and compiled the data layers. I extracted the GeoJSON files and prepared them for conversion to React. (View Code)
• Integration in React: The map is powered by Leaflet, a JavaScript library for interactive maps. I built React components to load the GeoJSON data layers dynamically and apply custom styling.
• Layer Toggle and Control: I created a custom controls component, allowing users to toggle different layers on and off. The control includes checkboxes for selecting which layers to display, with dynamic popups providing detailed information based on the layer selected.
• Customization of Markers: I added custom icons and popups to markers based on the layer, such as bike racks, historic sites, and public art, showing relevant details when clicked.

The map provides an intuitive user interface for exploring biking trails and city landmarks. Users can:

• Toggle Layers: Checkboxes allow users to toggle the visibility of layers like bike lanes, parks, and historic sites.
• View Details on Click: Clicking on any destination icon provides a popup with relevant details (Name, image, etc. ).
• Custom Icons: Each feature type is represented by a distinct icon to visually differentiate between bike lanes, public art, benches, and more.
• Interactive Exploration: The interactive map allows users to zoom in and explore various areas of Salt Lake City while filtering the information they want to view based on their preferences.

• Cycle Map from OpenStreetMap.org (Link)
• Protected Bike Lanes (Link)
• Sweeping Bike Lanes (Link)
• On Road Bike Ways (Link)
• Bike Rack (Link)
• Historic Sites (Link)
• Historic Preservation (Link)
• Park (Link)
• Points of Interest (Link)
• Public Art (Link)
• Bench (Link)

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.