Avery's Pet Sitting

This is a website I built for my girlfriend for her dog and cat sitting side-hustle. This application utilizes the T3 Stack (Next.js, TypeScript, and Tailwind CSS), as well as Bootstrap and Sass for styling. This project utilizes a contact form so end-users can easily reach Avery via her email, as well as access her Calendly account to set up initial appointments. This website was built using mobile-first design, and will feature a back-end system in the near future.

Link to project: Avery's Pet Sitting

How It's Made

Tech used: Next.js, TypeScript, Tailwind CSS, Sass, HTML, CSS, JavaScript, jQuery

Lessons Learned:

This project definitely tested my creative UI/UX design skills, and I am incredibly thankful that I had the opportunity to showcase my skills through this project. Creating a dynamic navbar that changes based on what page the user is currently on, creating a fixed background image that changed to absolute when a user scrolled past a certain point, and creating a seamless slideshow, definitely put my skills to the test. This project is ongoing, and I am hopeful to add a back-end system to the front-end as soon as possible.

How To Run on Your Machine:

1. Click on the green 'Code' button on this repository.
2. Clone the repository by copying the web URL.
3. Navigate to your desired folder you would like this project to reside in.
4. Open up VS Code (or another IDE) and navigate to this folder.
5. Open up your terminal.
6. Type 'git clone url copied from step 2'.
7. Make sure you are in the root directory of the folder (the /app, /public etc folders should be here).
8. Type 'npm install'.
9. Type 'npm run dev'.
10. Additionally, the project can be viewed here (without running this project on your local machine): https://www.averyspetsitting.com