Eckwerk Stuttgart is a modern web application showcasing professional services in home crafts, tree care, and terrace construction. Built with Astro, Tailwind CSS, and enhanced with GSAP animations for a smooth user experience.
- High Performance: Fast loading and rendering with Astro's static site generation
- Responsive Design: Seamlessly adapts to all device sizes
- Interactive Elements: Smooth animations powered by GSAP
- Image Galleries: Showcasing project portfolios with modal support
- Content Management: Structured with Astro's content collections
- Development Tools: Docker support for consistent development environments
- Node.js (v16.x or later)
- npm or yarn
- Git
- Clone the repository
git clone https://github.com/yourusername/eckwerkstuttgart.git
cd eckwerkstuttgart- Install dependencies
npm install
# or
yarn install- Start the development server
npm run deveckwerkstuttgart/
├── public/ # Static assets (images, fonts, favicon, etc.)
├── src/
│ ├── assets/ # Project-specific assets (processed by build)
│ │ ├── Albums/ # Image collections for galleries
│ │ └── icons/ # SVG icons and logos
│ ├── components/ # Reusable Astro components
│ ├── content/ # Content collections and config
│ ├── hooks/ # Custom hooks
│ ├── layouts/ # Page layouts
│ ├── pages/ # Page components/routes
│ ├── styles/ # Global styles
│ ├── types/ # TypeScript type definitions
│ └── utils/ # Utility functions
├── astro.config.mjs # Astro configuration
├── tailwind.config.mjs # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── docker-compose.yml # Docker configuration
All commands are run from the root of the project:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:4321 |
npm run build |
Build your production site to ./dist/ |
npm run preview |
Preview your build locally, before deploying |
npm run astro ... |
Run CLI commands like astro add, astro check |
npm run astro -- --help |
Get help using the Astro CLI |
- SectionContent.astro: Content sections with optional images
- Gallery.astro: Image gallery with lightbox functionality
- GalleryModal.astro: Modal component for image viewing
- Navigation.astro: Responsive site navigation
- Intro.astro: Landing page hero section
- Animations.ts: GSAP animation utilities
npm run buildThis generates optimized static files in the ./dist/ directory that can be deployed to any static hosting service.
npm run previewThe project is configured for automatic deployment to GitHub Pages:
- Push changes to the
mainbranch - GitHub Actions workflow automatically builds and deploys the site
- The site is deployed to
https://yourusername.github.io/eckwerkstuttgart/(or your custom domain)
For manual deployment to other hosting services:
- Build the project:
npm run build - Upload the contents of the
dist/directory to your web server - Ensure proper MIME types are configured on your server
- For SPA routing support, configure URL rewriting to redirect requests to
index.html
If using a custom domain:
- Add your domain to the
CNAMEfile in thepublic/directory - Configure DNS settings with your domain provider:
- For apex domain: Add an A record pointing to your hosting provider's IP
- For subdomain: Add a CNAME record pointing to
yourusername.github.io
- Enable HTTPS in your hosting settings for secure connections
Contributions are welcome! Please follow these steps:
- Fork the repository
- Create your feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add some amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
This project is licensed under the MIT License.