Photography Website

This project is a responsive photography portfolio built using Next.js, Tailwind CSS, and TypeScript. It showcases beautiful photography and provides sections for the user to learn more about your work, contact information, and a smooth scroll effect with intuitive navigation.

LIVE PREVIEW

🔗 View the Live Site: https://photography-website-amber.vercel.app/

Click the link above to explore the photography portfolio in action!

Features

• Mobile-First Design: Optimized for mobile devices with responsive design and smooth scrolling.
• Tailwind CSS: Utilized for fast, customizable, and responsive styling.
• Next.js with TypeScript: Uses Next.js for server-side rendering and static site generation with TypeScript for strong type safety.
• Optimized Images: Leveraging Next.js' Image component for optimized images.
• Smooth Scrolling and Animations: Enhanced user experience with scroll effects and animation (e.g., bouncing arrow).
• Contact Information: Contact form with links to email, phone number, and Instagram.
• Basic SEO: The site has optimized meta tags, including title, description, and keywords, to improve search engine visibility.

Technologies Used

• Next.js: Framework for building React applications with great performance and scalability.
• Tailwind CSS: Utility-first CSS framework to rapidly build custom designs.
• TypeScript: Adds type safety to JavaScript for better development experience and fewer bugs.
• Lucide React: Icons for use in navigation and interface elements.
• Next.js Image Optimization: Built-in image optimization for faster page loads.

Getting Started

1. Clone the repository

git clone https://github.com/sergiovzambelli/photography-website.git
cd photography-website

2. Install dependencies

Make sure you have Node.js installed. Then, install the necessary dependencies:

npm install

or if you're using Yarn:

yarn install

3. Run the development server

To start the development server, run:

npm run dev

or with Yarn:

yarn dev

This will start the Next.js development server at http://localhost:3000. Open your browser to view the website.

4. Customize

• Images: Replace the images in the /public/images/ directory with your own portfolio images.
• Text: Update the text content within the components (Hero, FirstSection, FinalSection, Footer) to match your brand or information.
• Contact Info: Modify the email, phone number, and Instagram handle in the FinalSection component with your own.

Customization

• Font: The project uses the Poppins font from Google Fonts. You can change the font by editing the font-poppins class in globals.css.
• Colors: Tailwind CSS utility classes are used for styling. You can adjust colors and styling by modifying Tailwind’s configuration file or adding custom classes.
• Animations: The page includes a "bouncing" down arrow using Tailwind’s animate-bounce. You can customize this or replace it with other animations.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Photo Credits

All photos used in this project are credited to their respective photographers.

• Joao Cabral (Source Link)
• Jeys Tubianosa (Source Link)
• Aleksandar Pasaric (Source Link)

If you are the author of any image and wish to have it removed or credited differently, please contact me!

Contact: sergiovzambelli@gmail.com