OH.STUDIO Landing — Replica

In this project, I recreated the landing page of Oli Harris's portfolio website. This was a challenge from Frontend Practice. The project involves building a responsive website for a design agency called OH Studio. The website should have a clean and modern design, with a homepage showcasing the agency's work, services, and contact.

Tech Stack

Client: React, TailwindCSS, Framer Motion.

Hosting: Vercel.

Screenshots & Demo

View Live Demo

Run Locally

Clone the project

  git clone https://github.com/victorcodess/oh-studio-landing

Go to the project directory

  cd folio-v1

Install dependencies

  npm install

Start the server

  npm run dev

Learnings

In this project I learnt a couple of new things, especially CSS and JavaScript animations. The toughest part was recreating the hover animations on the project cards and also animating the SVG stroke-width and translate properties. I also used react-intersection-observer to animate the text fading in on both page load and while scrolling. I used CSS backdrop filters to create the blurred glass effect on the fixed navigation menu.

License

MIT