The typical "Hello I'm ___, and I make ___ sites" concept that so many portfolio sites use became cliche, and the purple color scheme was not conveying the aesthetic I was after. Font and color inconsistencies were also problematic.

Despite the difficulties, the design took a long time - many weekend evenings across the span of a month or so. This taught me the value of "not reinventing the wheel" - many of the concepts I wanted to employ were already done by somebody else and an iteration existed on CodePen or StackOverflow. Although it was good practice to write the code on my own, taking advantage of components that have already been created would have freed up my time to correct other problems.

The navigation is big, noticeable, and shows the user where they are on the page, allowing them to move around with a scrolling transition. Information was grouped as much as possible and included graphics to avoid long sections of text. The most crucial information (like the when, where, and how) is especially prominent in a 3-column grouping.

Less important information (which might still answer some guest's questions) was put into a Miscellaneous Info section organized by icons to allow users to quickly find what they need visually. Mobile-friendly icons were added on the day-of to allow guests using a mobile device to find directions, schedule, and shuttle bus info.

Cute personalized touches like the footer help keep the page relaxed, casual, and special.

This was also my first foray into Bootstrap (with which I fell in love instantly for its ease of responsive design).

In the future, I'd like to explore ways to make the grid larger (without slowing down the page to a grinding halt). I also think this kind of script could have some application to creating a puzzle game (for example revealing an image by toggling only certain DIVs on a grid.

For this to be a useful experience for the everyday person, most of the information required seemed superfluous - not many people would know or care about the moon's age, angle, distance from Earth, or the constellation it was in.

To de-clutter the amount of information on the page and to be able to represent it most efficiently, I only left the current date, a graphic of the current phase, the name of the phase, and a monthly calendar.

Generating the graphics of the moon phases was probably the most time-consuming piece of the entire project. NASA had a graphic with 8 different phases available, and I used Photoshop to create 8 more for a total of 16 different phase pictures to ensure a smooth transition.

Future enhancements to this may include the ability to cycle between months, and set a custom date to see a larger graphic of what the moon phase will be on that date.

As demonstrated by this, and other examples created by many artists and designers, CSS can eliminate the need for flat images — which means a more responsive and less-bulky pages.