Portfolio

Golden Sunrise

A tool for finding when sunrise aligns with a landmark

User guide is available inside the app via the menu About ➡ How to use

In a place with months of rain and cloud cover, sunrise is something I saw only occasionally.
On the rare clear mornings, I noticed how much the sunrise shifted along the horizon – far to the south or north of Mt. Hood.
That made me wonder when it would rise exactly behind the mountain.

I checked the direction of Mt. Hood from my viewing location using Google Maps.
Since that line was only a few degrees off true east, I guessed the alignment would happen near the equinoxes.
I wrote a small Python script to compare the bearing with the sunrise azimuth as a quick sanity check.
I went out before sunrise around those dates, and on clear mornings the sun did rise behind Mt. Hood.

I wanted to calculate the exact alignment dates and extend the idea to any viewing point and landmark, anywhere in the world.
The core idea was simple: compute the bearing from viewer to landmark, then for each day of the year compute the sunrise time and sun’s azimuth, and finally find the days where the azimuth is close to that bearing.
I built small, modular functions to test each step rigorously, running everything from the command line until the results matched my real‑world observations.

Chose Next.js for routing and fast server‑side rendering, React for the UI foundation, and Leaflet for the interactive map.
Designed the UI to reflect the flow of the process: introduction, location input, results, and supporting information, each in a distinct page accessible through the menu.
Connected the prototype calculations to the UI, keeping the logic modular and easy to test.
Added preset locations to make the demo easy to explore, and built an About menu that brings together the app’s features, limitations, and other notes.

The prototype went through several rounds of refinement because the early results didn’t match my real‑world observations. Accounting for elevation differences, ground distance, and the drop from Earth’s curvature was what finally brought the calculations in line with the dates I had observed.
Designing a clear UI took its own effort, especially around the interactions, transitions, and making the layout work well on mobile.
Learning Next.js added another layer of challenge — understanding what belonged in server components versus client components was a constant part of the process.

How to apply geometry over a curved surface, and how valuable thorough unit tests are when validating prototype calculations.
The practical boundaries between server‑side rendering and client components in Next.js.
UI layout strategies, and how to use CSS effectively to blend real sunrise photos into a clean, minimal interface.

Add a contact form where users can send feedback or share sunrise photos.
Add a photo gallery if users submit images of their own alignment sightings.
I’m interested in seeing how the calculation behaves elsewhere in the world. I tuned the logic to match my own observations in the mid‑northern hemisphere, and I expect the southern hemisphere may require different adjustments. Polar or equatorial regions are still unknown to me.