GoldHouse

GoldHouse is a responsive landing page for a restaurant created using Next.js, React, and animation libraries like GSAP (GreenSock Animation Platform) and Flickity.

This project was an unexpected one but it opened me up to things I would have overlooked before: page animations, improved UX, and leveraging the power of CSS! I met Chris Miller and shared the projects I had worked on until then with him. Fortunately, Chris had had worked with a designer, Jason Lee, who had worked on creating a dummy landing page for a restaurant as a passion project. He was looking for someone to bring the design to life using code and he asked me to give it a shot.

Follow Chris on Twitter if you haven't yet for some really good dev content.

(Highly) Improved Design

Jason was the designated and experienced designer on this project. I was used to implementing simple designs that are not too complex to code. My first impression of the website was how amazing it looked. I could just picture a really cool restaurant in a upscale neighborhood when I looked at the website. The design has its own personality and it really stands out.

I started out by creating a mockup of the website with HTML and SCSS to make sure I get the placement and styling of each element right. I created the mockup for all screen sizes: desktop, tablet, and mobile. Chris was fantastic in providing inputs throughout which really helped me improve the code and the design of the website. He definitely made the work feel easier and not a chore.

Once the mockup was finalized, I converted the HTML to JSX in order to build the Next.js landing page. This also involved splitting up the whole page into components and passing data using props to every component.

Here is Chris' update while I was working on this project which could give you an idea of the design of the website.

Animations using GSAP and Flickity

One of the things I had not really considered before this project was page animations. During my first meeting with Chris, he showed me a few websites he had worked on. My mind was totally blown by the design and UX of each website. I remember comparing some of the designs he showed me to Apple's web pages. Apple's pages have some of the best designs out there along with flawless UX.

This was a great opportunity to dive into animations. My only concern was to not overdo animations because that would distract the visitor away from the content on the page. I used GSAP and GSAP ScrollTrigger to animate the elements.

Additionally, I also used Flickity to create the carousel sliders. In order to use Flickity with React, I used React Flickity Component (If you are working with Flickity and React, you need to add some style overrides).

I couldn't have done any of this project without Chris' contribution and without Jason's fantastic design work. They made working with them easier and really helped me push my boundaries.

Here is the Twitter thread by Chris summarizing his experience of working on this project with me.

Besides exploring new web development concepts, my biggest takeaway is to collaborate more with people. It definitely accelerates learning. So, if you have a passion project and need a developer to transform the design into a fully functional website, let me know.