Project Summary

Concept

The goal was to build a creative, interactive microsite with the content from the Star Wars Wikipedia page, focusing on the premise, films and TV shows, chronological timeline, original trilogy characters, a map of the Star Wars universe, themes, and cultural impact. Santiago wanted something that moved beyond a standard wiki-style layout. He had a pretty clear vision for the website, and I could tell he's a passionate Star Wars fan.

His idea to make the whole site a single smooth-scrolling page reshaped how I envisioned the site turning out. Before that, I thought about breaking the content across multiple pages. He also pointed me to Lando Norris's website as inspiration for the level of creativity, interactivity, and scrolling animations he wanted, which reminded me of Apple's website and the storytelling Apple is able to do through their scrolling animations and high quality visuals.

We were able to fine-tune his ideas during our initial meeting, going over each section one at a time. I had two Figma mockups: Set A used a gold color scheme, and Set B used more red and blue colors inspired by lightsabers. I went with Set A because the gold matched the Star Wars logo and was what Santiago was looking for. From there, I did an initial build to get all the content down and insert a few images as well as placeholders for where content could go. Then I did two more iterations: the fully-realized site, then the final site with some small fine-tuning and tweaks.

Understanding of the Topic

I had no familiarity with Star Wars at all before this project. I've never seen any of the movies. I only knew about certain characters just because they're so famous in pop culture, like Darth Vader, Luke Skywalker, or Yoda, but I couldn't have placed them in a timeline or explained their relationships with each other.

I had to do real research to make this site accurate. I watched the iconic opening crawl to get a better sense of the effect I was trying to create for the premise section. I researched the characters and the full timeline across all eras, including the difference between BBY and ABY dating and which films, series, and games belong to which era. I also needed to pin down the most important planets to support the galactic map feature I had planned, even though that got scoped down later.

Building this site forced me to become functionally literate in Star Wars lore to an extent. Even though I still don't know the intricacies, I know that there was the High Republic and the Old Republic, and I know about Anakin's character arc. And since I worked on the timeline, I can place The Mandalorian correctly within the New Republic era.

I do have website development experience, but I've never built a fan site before or tried to give a wiki page a creative spin. Most of my previous work has been pretty standard with predictable vertical scrolling, normal navigation, and very straightforward content layouts. This project pushed me to think differently.

Creative Direction & Feedback

My creative director was Santiago. He had a clear vision for the website, and from our first conversation, I could tell he's a passionate Star Wars fan.

During our initial meeting, we fine-tuned his ideas and went over each section one at a time. He had strong opinions about the overall tone. He wanted it to be cinematic, immersive, and slightly retro and pixelated. He emphasized the need for interactive elements like hover popups, the map you can zoom in on, and scroll-triggered animations, as well as the color palette and fonts to make the overall branding right.

The most transformative piece of feedback was his idea to make the whole site a single smooth-scrolling page. Before that, I had thought about breaking the content across multiple pages. That suggestion made the site more immersive and forced me to be creative with how I organized the content and structured the user experience. It also made the animations and interactivity more impactful since everything was on one page rather than spread out across multiple pages.

He also referred me to Lando Norris's website as inspiration for the level of creativity and interactivity he wanted. Studying that site helped me understand the bar I was aiming for.

Major Builds Delivered

• Figma mockups Set A and Set B – Set A used gold, Set B used red and blue lightsaber colors. I went with Set A because the gold matched what Santiago wanted more closely.
• Initial build – I got all the content down and inserted a few images as well as placeholders for where content could go.
• The fully-realized site – I created a complete HTML/CSS build with all sections, animations, and interactive elements.
• The final site – I made minor changes from the fully-realized site and fine-tuned the website based on his review.

I received more limited feedback from Santiago in later iterations since I think he had some personal things to deal with, but I was still proactive and tried reaching out. I kept his original vision in mind throughout my process.

Synthesis

Before building anything, I had to pull from multiple sources and organize everything. I pulled mostly from Wikipedia — I used the main Star Wars film page, but also had to use extra sites like the character-specific Star Wars pages. I also used Wookieepedia, which is the Star Wars Fandom page, to fill in gaps that Wikipedia didn't cover.

I created a master outline document that combined everything into one coherent structure. That outline included era names and date ranges, every film and series listed by chronological placement, character names with brief descriptions, theme headings with supporting paragraphs, and cultural impact statistics.

Once I had curated all that content myself, I was ready to start building. Nothing was added without a source, and nothing essential was removed.

Design and Development Process

Tools Used

Approach

I had a clear concept in my head and detailed notes from meeting with Santiago. I started with Figma mockups before moving forward with one direction. Once I had the mockup approved, I took my curated content outline and put it into Cursor to build out a shell and framework for the site overall.

For responsive design, I used Google Chrome Inspector and resized to various common screen sizes, like phones, tablets, and desktop, and made adjustments to padding, font sizes, and grid layouts to keep everything usable and coherent.

Once the shell and framework were in place, I didn't use AI for formatting layouts or organizing things into grids and flexboxes. I handled all the structural CSS manually so I could have full control over the responsive behavior and visual rhythm.

At the end, I used AI to make sure my CSS styling in terms of the colors, padding, margins, and spacing was consistent throughout so I wouldn't have to check every line and CSS class manually.

Challenges & Successes

Biggest Success

Figuring out the premise screen crawl animation. I had a lot of trouble warping the text properly and getting the perspective transform to feel cinematic rather than glitchy. It took a lot of trial and error with transform properties and JavaScript to tie the animation progress to scroll position. I also added mouse tracking to create a subtle steering effect, which made the crawl feel more dynamic.

I also really like how the site syncs up with the music when the Star Wars logo appears. That small touch elevates the experience from a static page to something that feels like an event.

Overall, the level of interactivity across the site that you can clearly see in the crawl, the hover popups, and the horizontal timeline scroll is what I'm most proud of.

Biggest Challenge

Getting the animations to work in general. It was finicky. If it looks good, it's really good, but if there are small issues in the animations, it messes up the smooth experience of the entire website.

I also had to cut one feature. The timeline was originally supposed to move horizontally across the page as the user scrolled vertically — a parallax-style effect where scrolling down would slide the timeline left or right. That proved too complex to implement reliably within the project timeline. I built a horizontally scrolling timeline section instead. The user just has to stop at the timeline section and scroll horizontally over that section. It's not as ambitious as the original idea, but it's functional, intuitive, and still delivers the pixel-style aesthetic Santiago wanted.

What I Learned

• Animations are finicky but worth it. Getting the crawl right took hours, but the final effect is the centerpiece of the site.
• Start with a strong content outline. Having a complete outline before writing HTML saved me from having to reorganize content over and over.
• Know when to cut a feature. The scroll-driven horizontal timeline would have been great, but the simpler version did the job and was more realistic to implement within the time constraints.
• Building for a passionate fan means getting the small details right. Santiago knew the Stars Wars universe inside and out. If I had gotten a date or character detail wrong, he would have noticed, and as a result, I made sure to do my research thoroughly.

AI Use

After creating an outline of content myself and curating it all, I put it into Cursor and had it build out a shell and framework for the site overall. I used Cursor to help with the animations, especially at the top of the site with the crawl effect.

I did not use AI for any design inspiration. I just looked at Star Wars images and videos, plus other space-themed websites through a simple Google search. I also looked at Lando Norris's site as Santiago recommended.

Once I had the shell and framework of content done, I did not use AI for formatting layouts or organizing things into grids and flexboxes. I handled all of that structural CSS myself.

At the end, I used AI to ensure my CSS styling, colors, padding, margins, and spacing were consistent throughout so I wouldn't have to do it all manually.

The animation parameters required manual tuning. AI could suggest a transform matrix, but only I could see whether it looked "right" in the browser and adjust accordingly.

Final Reflection

Overall, this was very fun and challenging to build. I've never built a website so custom and out of the box. A lot of my previous web development experience has been using pretty standard paradigms in terms of the way text scrolls, how stuff is organized, and how navigation works. This project pushed me far outside my comfort zone.

I'm super proud of what I delivered with the working intro crawl, an accurate timeline and interactive map, different hover states and more. The whole site feels like it belongs in the Star Wars universe rather than just describing it.

I have never built a site quite like this before and I would happily build another one for another topic!