This is an example project that demonstrates the use of Astro and React to build a web application. It includes features like smooth scrolling animations and scaling effects for images, titles, and descriptions. Below you'll find a brief guide on how to set up and run the project.
Before you begin, make sure you have the following tools and dependencies installed:
- Node.js (v20.0.0 or higher)
- NPM (Node Package Manager)
-
Clone this repository to your local machine:
git clone https://github.com/lqq-code/Astro-Music.git
-
Change your working directory to the project folder:
cd Astro-Music
-
Install project dependencies:
npm install
To run the project in development mode, use the following command:
npm run dev
This will start a development server and make your application accessible at http://localhost:3000
.
To build the project for production, use the following command:
npm run build
The production-ready files will be generated in the dist
directory.
The project structure is organized as follows:
src
: Contains the source code of the application.public
: Contains public assets like images and fonts.dist
: The build output, generated when building the project.
- Astro: A static site generator that combines the best of static and dynamic web development.
- React: A JavaScript library for building user interfaces.
- GSAP: GreenSock Animation Platform for smooth animations.
- Smooth scrolling animations with scroll-triggered GSAP animations.
- Hover scaling effects for images, titles, and descriptions.