Building the Foundation of the New Website

Quick Summary

Main focus: beginning the actual rebuild of the Gliding Stars website, creating the foundational navigation and layout systems for the new site, and translating weeks of observations and critiques into a cleaner, more modern, and more maintainable digital experience.

Finally Starting the Website

After the show and banquet ended, it was finally time to fully focus on the website rebuild.

Honestly, beginning the website was probably the hardest part of the entire internship so far.

When you start building a website, you are literally staring at a blank page.

At first, all I had was:

• a browser window
• Times New Roman text
• “Gliding Stars of Erie”
• and “Under Construction”

But in my head, I already had this vision of what the site could become compared to the current one.

And because I had spent so much time analyzing the old website already, my expectations for myself were extremely high.

That honestly made getting started difficult.

I knew exactly what I didn’t want the new site to feel like:

• cluttered
• outdated
• confusing
• inconsistent
• non-responsive
• or emotionally disconnected from the organization itself

So for a while, it felt hard to even know where to begin.

But once I finally got momentum, I honestly could not stop working on it for days straight.

Starting With the Foundation

The first thing I built was the navigation and footer system.

That choice was intentional because those were honestly some of the weakest parts of the previous website.

As I discussed in my earlier website analysis, the old homepage had no real header navigation at all.

Users essentially landed on the homepage and had no immediate direction:

• no strong menu structure
• no clear calls-to-action
• and no intuitive sense of where to go next

So I knew the navigation system needed to become one of the strongest parts of the redesign.

Before I even worried about content, pages, or media, I wanted the site itself to feel:

• organized
• clean
• modern
• and easy to move through

Because if the foundation feels sloppy, the entire site feels sloppy.

Choosing the Visual Style

Very early on, I knew I wanted the overall visual feel of the website to stay clean and simple.

Blue immediately felt like the right primary color choice.

Ice naturally carries blue associations, and the Gliding Stars logo already uses blue gradient stars, so it felt like the best way to modernize the organization visually while still staying recognizable and familiar.

I chose a clean, solid blue tone to become the main foundational color throughout the site.

One thing I became surprisingly obsessive about was spacing.

I spent a huge amount of time adjusting:

• spacing between navigation links
• padding
• alignment
• hover effects
• sizing
• and overall visual balance

Because navigation is something users interact with constantly on every page.

If navigation feels awkward, cramped, or inconsistent, the whole site immediately feels less professional.

Building a Better Navigation System

I also wanted social media links to be immediately visible at the top of the site.

One of the biggest communication issues I identified earlier in the internship was that Gliding Stars had almost no clear public-facing digital presence.

So I designed the navigation to include direct links to:

• Facebook
• Instagram
• and eventually other public-facing platforms

I spent a lot of time making sure those social links actually looked intentional and polished rather than feeling randomly placed.

I also focused heavily on small user experience details that most people probably never consciously notice—but absolutely feel subconsciously while using a website.

For example:

• highlighting the current page in the navigation
• smooth hover transitions
• spacing consistency
• responsive layouts
• and navigation behavior during scrolling

One detail I was especially proud of was hiding the logo from the navigation bar while users are at the top of the homepage.

Since the homepage already prominently displays the logo immediately at the top, showing it again in the navigation felt visually repetitive.

So the navigation dynamically changes after scrolling past the hero section.

That is a tiny detail, but those kinds of details are what make websites feel intentional and modern instead of generic.

Prioritizing Mobile Responsiveness

One of the biggest goals of the rebuild from the very beginning was making the site genuinely usable on mobile devices.

That issue was one of the most frustrating parts of the previous site.

As I wrote in my earlier analysis:

• text was difficult to read
• layouts were cramped
• font sizes did not adapt properly
• and mobile navigation was almost nonexistent

So while building the new navigation system, I constantly checked how everything behaved on phones and smaller screens.

That required a lot of additional CSS specifically designed for mobile-width layouts.

For example:

• the navigation collapses into a hidden mobile menu
• touch targets become larger for easier tapping
• spacing changes dynamically
• and layout elements reorganize themselves depending on screen size

That last point especially mattered because taps on phones are much less precise than mouse clicks on desktop.

If buttons or links are too small, the experience immediately becomes frustrating.

So even the tiny details of the mobile menu became important to me:

• spacing
• button size
• animations
• alignment
• and readability

Honestly, I am extremely proud of how the navigation turned out overall.

Reworking the Footer

I also redesigned the footer system while still keeping some of the spirit of the old site intact.

The previous footer had several issues:

• inconsistent colors
• awkward legal text placement
• cluttered navigation
• and a random bright red background that felt completely disconnected from the rest of the branding

So I simplified and reorganized everything.

The new footer still includes the logo, but now it is followed by:

• mailing address
• contact information
• phone number
• email
• social media links
• and the actual skating location

That last part was especially important because early in the internship, I honestly was confused myself about whether Gliding Stars had a physical “home” location or not.

Separating:

• mailing address
• from skating location

helps make that much clearer for families and visitors.

I also kept the footer navigation itself relatively similar structurally—but cleaner, more modern, and definitely not bright red anymore.

Choosing the System Behind the Site

Once the foundational layout system was finished, I could finally begin building actual page content.

The system I ultimately chose for the website (at the recommendation of my DIGIT advisor Dr. B) was Eleventy.

One of the biggest reasons I chose Eleventy is because it separates:

• page content
• from page structure

The site uses:

• Markdown files for content
• and .njk template files for layouts and HTML structure

That setup makes the site dramatically easier for non-technical volunteers to edit safely without accidentally destroying layouts or breaking code.

Compared to the current website system—which felt very intimidating and difficult to manage—this approach feels much more sustainable long-term.

Of course, no system is completely foolproof.

I cannot predict every future change someone might try making.

But overall, I think this setup creates a much better balance between:

• flexibility
• simplicity
• maintainability
• and modern design

And even after the internship officially ends, I fully intend to continue helping monitor and support the website as needed while they get comfortable with it.

Reflection

This week honestly felt like the point where the internship shifted from mostly observation and planning into something tangible and real.

For weeks, I had been identifying problems:

• poor navigation
• inconsistent branding
• confusing information architecture
• mobile responsiveness issues
• outdated visuals
• and weak communication systems

Now I was finally starting to solve those problems directly.

And honestly, once the foundation started coming together, I could finally begin seeing the larger vision in a real form instead of only in my head.

That was a really rewarding feeling.

Because after spending so much time with the organization itself, I genuinely wanted the website to finally reflect:

• the warmth of the people
• the excitement of the show
• the energy of Monday nights
• and the professionalism the organization deserves

Now that the framework exists, the next step is building the actual content experience on top of it.

Next Steps

• Begin building the homepage content and layout
• Determine final page structure and navigation naming
• Continue integrating mobile-responsive design throughout the site
• Begin organizing media captured during the season for web use
• Start translating Gliding Stars’ story into a cohesive digital experience