catherineisonline / travel-with-catherine

📸 Travel with Catherine: A photography portfolio that showcases my love for travel and code. Built using React, Node.js, TypeScript and Tailwind, this project is a great example of my skills and eye for detail.

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

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!

travel-with-catherine's Issues

idea

图片，我看您是使用指定图片名称，能否实现图片放入指定文件夹中，自动读取加载呢？这样貌似更加方便一些。

I see that you are using the name of the specified picture. Can you put the picture into the specified folder and automatically read and load it? It seems more convenient.

Picture light box

未来能否支持呢？这个项目很满足小白和旅行✈️爱好者的图片网站。

Can it be supported in the future? This project is very satisfying for Xiaobai and travel ✈️ enthusiasts on the picture site.

Can the image option function be realized in the later stage?

Can the image option function be realized in the later stage?
Is similar to the back click on the picture, you can enter a pile of pictures, you can also choose whether there is copy.

383_1713356700.mp4

Mobile phones don't work