|
| 1 | +# CleanUpHack Landing Page |
| 2 | + |
| 3 | +Landing page for the CleanUpHack initiative (SCESI). Built with Astro 5, Tailwind CSS 4, and Framer Motion for smooth UI animations. |
| 4 | + |
| 5 | +## Tech Stack |
| 6 | + |
| 7 | +- Astro 5 (content-focused, island architecture) |
| 8 | +- Tailwind CSS 4 (via `@tailwindcss/vite`) |
| 9 | +- Framer Motion (animation) |
| 10 | +- TypeScript ready (tsconfig included) |
| 11 | +- ESLint + Prettier (consistent code style) |
| 12 | + |
| 13 | +## Project Structure |
| 14 | + |
| 15 | +```text |
| 16 | +/ |
| 17 | +├── public/ |
| 18 | +│ └── clean-up.svg |
| 19 | +├── src/ |
| 20 | +│ ├── assets/ |
| 21 | +│ │ ├── astro.svg |
| 22 | +│ │ └── clean-up-hack.svg |
| 23 | +│ ├── components/ (UI components - add your .astro / .tsx files here) |
| 24 | +│ ├── layouts/ |
| 25 | +│ │ └── Layout.astro |
| 26 | +│ ├── pages/ |
| 27 | +│ │ └── index.astro |
| 28 | +│ └── styles/ |
| 29 | +│ └── global.css |
| 30 | +├── astro.config.mjs |
| 31 | +├── package.json |
| 32 | +└── tsconfig.json |
| 33 | +``` |
| 34 | + |
| 35 | +## Quick Start |
| 36 | + |
| 37 | +```bash |
| 38 | +npm install |
| 39 | +npm run dev |
| 40 | +``` |
| 41 | + |
| 42 | +Open http://localhost:4321 |
| 43 | + |
| 44 | +## Available Scripts |
| 45 | + |
| 46 | +| Script | Description | |
| 47 | +| ---------------------- | ------------------------------ | |
| 48 | +| `npm run dev` | Start dev server (hot reload) | |
| 49 | +| `npm run build` | Production build into `dist/` | |
| 50 | +| `npm run preview` | Preview the built site locally | |
| 51 | +| `npm run astro` | Run Astro CLI commands | |
| 52 | +| `npm run lint` | Lint source files | |
| 53 | +| `npm run lint:fix` | Lint + auto-fix | |
| 54 | +| `npm run format` | Format all files with Prettier | |
| 55 | +| `npm run format:check` | Check formatting | |
| 56 | + |
| 57 | +## Styling |
| 58 | + |
| 59 | +Global styles live in `src/styles/global.css`. Tailwind utilities are available everywhere; add component-level styles alongside components if needed. |
| 60 | + |
| 61 | +## Animations |
| 62 | + |
| 63 | +`framer-motion` is installed. For Astro + Motion, you can import motion components inside framework islands (e.g. React component) or progressively enhance. |
| 64 | + |
| 65 | +## Linting & Formatting |
| 66 | + |
| 67 | +Run before committing: |
| 68 | + |
| 69 | +```bash |
| 70 | +npm run lint && npm run format:check |
| 71 | +``` |
| 72 | + |
| 73 | +## Build & Deploy |
| 74 | + |
| 75 | +```bash |
| 76 | +npm run build |
| 77 | +npm run preview # sanity check |
| 78 | +``` |
| 79 | + |
| 80 | +Deploy the contents of `dist/` to your static host (Netlify, Vercel, GitHub Pages, etc.). |
| 81 | + |
| 82 | +## Contributing |
| 83 | + |
| 84 | +1. Create a new branch: `feat/<short-name>` |
| 85 | +2. Make changes and ensure lint passes |
| 86 | +3. Commit using conventional style if possible (e.g. `feat: add hero section`) |
| 87 | +4. Open a PR into `dev` |
| 88 | + |
| 89 | +## Roadmap (suggested) |
| 90 | + |
| 91 | +- Add SEO meta tags & Open Graph |
| 92 | +- Responsive navigation & mobile menu |
| 93 | +- Accessibility audit |
| 94 | +- Analytics integration (privacy friendly) |
| 95 | + |
| 96 | +## License |
| 97 | + |
| 98 | +MIT License © 2025 SCESI. See `LICENSE` for the full text. |
| 99 | + |
| 100 | +## Reference Docs |
| 101 | + |
| 102 | +- Astro: https://docs.astro.build |
| 103 | +- Tailwind CSS: https://tailwindcss.com |
| 104 | +- Framer Motion: https://www.framer.com/motion/ |
0 commit comments