Photographer is a portfolio page that showcases a collection of images in a grid layout. This project utilizes Astro.js to build the template and demonstrates the usage of the Masonry grid for displaying both vertical and horizontal images. Additionally, Photographer incorporates custom JavaScript indicators to provide visual cues for scrolling and to indicate the user's position on the page. To enhance the overall user experience with captivating animations, Gsap (GreenSock Animation Platform) is employed.
-
Grid Layout with Masonry: Photographer employs the Mansory grid layout to present a visually appealing collection of images. The Masonry grid system allows for flexible arrangement of both vertical and horizontal images, creating an aesthetic and balanced portfolio presentation.
-
Astro.js: The template is built using Astro.js, a modern static site generator that enables the combination of various technologies and frameworks to create performant and scalable websites. Astro.js facilitates server-side rendering and provides a seamless development experience.
-
Custom JavaScript Indicators: Photographer implements custom JavaScript indicators to enhance the user experience. The scroll indicator guides the user and provides a visual cue for scrolling progress, while the horizontal indicator highlights the user's position on the page, especially when browsing horizontally.
-
Gsap Animation: Photographe utilizes Gsap (GreenSock Animation Platform) to incorporate captivating animations. Gsap offers a wide range of animation capabilities, allowing you to bring motion and visual interest to various elements of the portfolio page.
To get started with Photographer, follow these steps:
- Clone the repository:
git clone https://github.com/klevert-ope/Photographer.git- Navigate to the project directory:
cd Photographer- Install the dependencies:
npm install- Build the project:
npm run build- Start the development server:
npm run start- Open your browser and visit http://localhost:3000 to explore the Photographe portfolio page.
You can customize Photographer to tailor it to your specific needs. Consider the following customization options:
-
Images: Replace the sample images with your own photographs. Update the image files located in the appropriate directory to showcase your unique portfolio. You can organize the images in the grid layout as desired.
-
Styling: Modify the TailwindCSS styles to match your branding and design preferences. The style files can be found in the components.
-
Animations: Experiment with different animations using Gsap to create captivating effects. Refer to the Gsap documentation (https://greensock.com/docs/) for detailed instructions and examples.
Photographer is licensed under the MIT License. You are free to modify and distribute this portfolio page for both personal and commercial use.
- Astro.js - https://astro.build/
- Gsap - https://greensock.com/