Features:
- Complex starting and hover animations
- Only 750kB bundle size (550kB in mobile) including images
- Responsive design
- SEO friendly
- Optimized images using Avif and WebP formats
- "Clip-pathed" images for best hover experience
- Pre-commit Hooks with Husky & Lint-staged for a Prettier write
Perfect Google PageSpeed Insights Score
This landing is a remake of the original one, made in a few days with Tailwind as an improvement for faster CSS coding and Astro for good performance (packs with Vite) and comfortable web development.
npm create astro@latest npx astro add tailwind npm i -D prettier prettier-plugin-astro npm i -D prettier-plugin-tailwindcss // for prettier automatic tailwind class sorting npm i -D ts-standard // for linting
-
Set up Github Actions in settings and add .github/workflows/deploy.yml configuration to the root of the project.
-
Configure astro.config.mjs following the official docs and add the base to all src in the project.
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run dev |
Starts local dev server at localhost:3000 |
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 |