- Developed using Astro, Tailwind CSS and Vercel
- By Aditya Parikh
To get started with this project, follow these steps:
- Clone the repository:
bash
git clone {repo link}- Navigate to the project directory:
cd ICDR- Install the dependencies
npm install- Start the development server:
npm run devThe development server will start at http://localhost:4321. Any changes you make to the code will be automatically reflected in the browser.
To build the project for production, run the following command:
npm run buildThis command will generate a production-ready build of your website in the dist/ directory. You can deploy the contents of this directory to a hosting service to make your website live.
The project structure is organized as follows:
ICDR/
├── src/
│ ├── components/
│ │ ├── Header.astro
│ │ ├── Footer.astro
│ │ ├── Hero.astro
│ │ ├── Features.astro
│ │ ├── Testimonials.astro
│ │ ├── Partners.astro
│ │ ├── CallToAction.astro
│ │ └── ContactForm.astro
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ └── index.astro
├── public/
│ └── images/
├── tailwind.config.js
├── astro.config.mjs
└── package.jsonsrc/components/: This directory contains reusable Astro components used throughout the website.src/layouts/: This directory contains the main layout component (Layout.astro) that wraps the entire website.src/pages/: This directory contains the main page components, which define the routes of the website.public/images/: This directory contains static image assets used in the website.tailwind.config.js: This file contains the configuration for the Tailwind CSS utility classes.astro.config.mjs: This file contains the configuration for the Astro build process.package.json: This file contains the project dependencies and scripts.
To edit a component, navigate to the src/components/ directory and open the corresponding .astro file. For example, to edit the Header component, open src/components/Header.astro.
Astro components use a mix of HTML, CSS, and JavaScript (or TypeScript). You can modify the markup, styles, and logic within these files to customize the appearance and behavior of the components.
After building the project, you can deploy the dist/ directory to a hosting service of your choice. Some popular options include:
Refer to the documentation of your chosen hosting service for instructions on how to deploy the dist/ directory.
To learn more about Astro and its features, check out the official Astro documentation.