Travel With Catherine - Live Preview

Table of Contents

• Introduction
• Features
• Technologies used
• Code
• Contribution
• Dependencies | API | Services used
• Google ReCAPTCHA
• License

Introduction

"Travel With Catherine" is a project where I share my love for traveling and my photography portfolio. It contains images from various travel destinations that I have captured during my travels. The project is built using React, Node.js, TypeScript and Tailwind.

Features

• Gallery Section: The heart of the project is the Gallery section, where you can explore my photography portfolio. The images are thoughtfully organized by destination, allowing you to browse through the distinct beauty of each location.

• Image Viewing: Clicking on an image in the Gallery will present you with a larger version, offering an up-close view of the stunning landscapes, vibrant cultures, and captivating moments captured in the photographs.

• Usage of Images: You are welcome to utilize the images from this portfolio in your own projects. However, kindly refrain from claiming them as your own creations. Proper attribution to the project is appreciated.

• Contact Form: The project incorporates a fully functional contact form that includes form validations and captcha protection. This ensures the security and accuracy of the information you provide. The contact form is powered by the email.js API, allowing you to send emails directly from the website.

Technologies used

• Frontend: React
• Backend: Node.js
• Language: TypeScript
• Styling: Tailwind CSS

Code

If you are interested in the code behind this project, you can find it in the src directory. The project uses React Router for routing and Tailwind for styling.

Contribution

This project serves as a personal portfolio website to show off my personal skills. I do not accept any contributions like pull requests to this project however if you have any suggestions or ideas feel free to message me, send me a message via a contact form on the website, or submit an idea in the discussions. Otherwise, you are free to fork this project and change it for your own purposes.

Dependencies | API | Services used

• Email.js
• React Router
• React Paginate
• Google ReCAPTCHA
• TinyPNG
• Image Slider

Installing Dependencies with pnpm

To install the project dependencies using pnpm, run the following command in the project directory:

pnpm install

Google ReCAPTCHA

If you do not have Google ReCAPTCHA account yet and want to test it, you can use the test credentials provided by Google.

• With the following test keys, you will always get No CAPTCHA and all verification requests will pass.

Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

The reCAPTCHA widget will show a warning message to claim that it's only for testing purposes. Please do not use these keys for your production traffic. You can read more about it here.

License

This project is released under the MIT LICENSE. You can find the specific terms and conditions outlined in the LICENSE file. This means you're free to utilize, modify, and distribute the project according to the terms of the MIT License.

Build Your Portfolio:

Feel free to incorporate this project into your personal portfolio! Showcase your skills and creativity by featuring your adaptations or implementations of this project. Just make sure to follow the guidelines of the MIT License while doing so.

Happy coding!