Skip to content

yiremorlans/loop-studios

Repository files navigation

Loopstudios

Loopstudios gaming company landing page that features immersive gaming and VR technologies.

Link to project: https://yiremorlans.github.io/loop-studios/

loopstudios website

How It's Made:

Tech used: HTML, CSS, Tailwind-css, npm, JavaScript

First round of this website build started working on desktop resolutions. Semantic choices for HTML elements such as nav, section, header, and footer were made in order to provide accessibility to non-screen users, and the best user experience. Once styling was added, it became increasingly difficult to manage all the css and media queries at breakpoints. I finished the landing page as I had started till I reached a minimum viable product. I decided to go back and build it again from scratch using tailwind-css and a mobile first approach. Tailwind-css was installed via npm as a dev dependency and configured to my theme specifications. It was really intuitive and easy to incoporate into my project for being a first time user. Separate CSS and vanilla javascript was written to incorporate a responsive hamburger menu on mobile and smaller devices.

Optimizations

Minor changes in the grid styling would allow the creations section to be featured without the distortion of the images.

Lessons Learned:

The majority of users on the internet are on mobile, which is why I'm commited to using a mobile first approach going forward to provide the best user experience across all devices.