OlympiaGear

Inspired by the sportsmanship of Olympics, we've developed OlympiaGear to make a stage for the world to see the current events happening while shopping the Paris Olympics Merchandise Website

Comment

Inspiration

We wanted to create something that will match the current trend so we went to browse the official Paris Olympics 2024 merchandise and thought it would be cool if we designed a website that not only sells Olympic stuff but also gets people pumped about the games! And that’s the moment where the idea of OlympiaGear was born.

What it does

OlympiaGear acts as a one-stop-shop for Olympic fans:

  1. Event Showcase: We've got all the exciting Olympic moments - ceremony replays, upcoming event schedules, and a shiny medal count.
  2. User Experience: A seamless and enjoyable shopping experience for users
  3. Olympic Central: It acts as an informative hub for Olympic where users can stay updated on Olympic events and their favorite athletes.

How we built it

We built OlympiaGear using:

  1. HTML: To structure the content of our web pages.
  2. CSS: To style our web pages and create a visually appealing design.
  3. JavaScript: To add interactivity and dynamic features to OlympiaGear.

Key Features:

  • Responsive Design: Our website looks great on all devices.
  • Color-Changing Effect: We used JavaScript to allow users to hover over stuff and watch the color changes.
  • Sticky Navbar: Our navigation bar follows users as they scroll, so you’re never lost in OlympiaGear.
  • Eye-Catching Media: We’ve used some GIFs and videos to keep things interesting and appealing.
  • Zoom-In Effect: We've used JavaScript to allow product image to zoom in when pointing.
  • Semantic Elements: We also used semantic elements in our html code to express the contents clearly. Instead of using non-semantic elements 'div' and 'span', we use 'form', 'table', 'footer', etc.

Challenges we ran into

  1. Scheduling Meetings: Coordinating common times for online meetings was challenging due to different schedules.
  2. Website Layout: Designing a layout that was both functional and aesthetically pleasing took us some brainstorming session to allocate the containers in the right place.
  3. Integration: Compiling everyone’s work at the end was more complex than we thought.

Accomplishments that we're proud of

  1. From Idea to Reality: We’ve successfully turned our rough ideas into a real, working website.
  2. Design Satisfaction: The final design is exactly what we were hoping for.

What we learned

  1. Teamwork Makes the Dream Work: We divided our task based on our strengths which leads us to this fantastic product, OlympiaGear.
  2. Communication: We learned the importance of clear communication - before, during, and after our meetings.
  3. Leveling Up Our Skills: We got much better at HTML, CSS, and JavaScript along the way.

What's next for OlympiaGear

  1. Screen Reader Functionality: We want to add features for people with hearing impairments.
  2. Color Correction Filters: We're thinking about adding filters to help folks with visual impairments, so they could buy shirts they want.
  3. Upgrade Backend System: We want to add a proper database to handle more advanced shopping features: user accounts, order tracking, and inventory management etc.
  4. Exclusive Merch: We want to pump up Olympic fans by introducing specialized products celebrating Paris Olympic athletes.

Conclusion

OlympiaGear isn't just a website - it's our way of spreading Olympic spirit and giving fans an awesome experience. We're pretty proud of what we've done so far, and we can't wait to make it even better!

Built With

Share this project:

Updates