Quick update for contribution and README

CONTRIBUTIONS.md

@@ -0,0 +1,94 @@
+# Contribution Guide
+
+- The website development is under the portfolio of ECSESS VP Technical Development
+- For content request, please refer to VP Communications for the content management.
+
+## Prerequisite knowledge
+
+- `npm` knowledge. We use `bun` for this project. See https://bun.sh for installation guide.
+- Svelte & SvelteKit: Follow the tutorial here: https://svelte.dev/tutorial/svelte/welcome-to-svelte
+
+## Collaboration workflow
+
+- Branches:
+  - `main` The development of the site, default branch on ECSESS org.
+  - All development branches: If you're working on an issue, **name your branch accordingly** so that we know what feature it is.
+- Pull Requests (PRs) & Code Review:
+  - Once your feature is complete, open a PR against `main`. Ensure to describe the changes made and link any relevant issues.
+  - At least one code review approval from ECSESS dev team members is required before merging.
+  - After merging, delete the feature branch to keep the repository clean.
+
+## Tech stack
+
+- SvelteKit (Svelte v5, Kit v2)
+- TailwindCSS (v4.0)
+- [`bun`](https://bun.sh) as Node.js package manager (similar to `npm`, `yarn`, `pnpm`, and `deno` v2)
+- Content Management System: Sanity
+
+## Development guide
+
+- Clone the repo and install dependencies, and start dev environment:
+
+```bash
+git clone https://github.com/mcgill-ecsess/ecsess-site.git # or use SSH
+cd ecsess-site
+bun i
+```
+
+- Create `.env` by copy `.env.example`
+- Add the Sanity CMS project ID `SANITY_ID=the_project_id` -- Contact VP TechDev or VP Comms for this info
+- See the development website locally at `localhost:5173`:
+
+```sh
+bun run dev
+```
+
+- To build and preview a production version of the website. This step is optional as Vercel handles the build and preview deployment automatically as you commit to a PR.
+
+```bash
+bun run build
+bun run preview
+```
+
+---
+
+# Content Management
+
+- See `ecsess-sanity-studio` for the development of the Sanity CMS studio.
+- Schemas are defined in `src/lib/schemas.ts` as reference based on what is configured in the Sanity studio
+- Each `+page.svelte` (client-side/frontend) has a corresponding `+page.server.ts` (server-side/backend) that fetches the content from Sanity CMS using GROQ queries. This data is loaded to `data` variable that can be accessed in the Svelte component.
+
+---
+
+## UI Designs
+
+### Figma
+
+- The [original Figma design can be found here](https://www.figma.com/design/tomzJ7nLU4KCkojf2vM6xq/ECSESS-Website?node-id=0-1&t=wph9RdHLmvAW6rld-1)
+
+### Colour Palette
+
+- The website relies on TailwindCSS custom colour variables:
+
+| HEX CODE | Variable name              |
+| -------- | -------------------------- |
+| #e8ffd9  | --color-ecsess-50          |
+| #cce7ba  | --color-ecsess-100         |
+| #a9d0a0  | --color-ecsess-200         |
+| #8fb98a  | --color-ecsess-300         |
+| #6a9a6a  | --color-ecsess-400         |
+| #5a8b5a  | --color-ecsess-500         |
+| #3f6a3f  | --color-ecsess-600         |
+| #2d5a2d  | --color-ecsess-700         |
+| #0a3d2a  | --color-ecsess-800         |
+| #062c20  | --color-ecsess-900         |
+| #031c15  | --color-ecsess-950         |
+| #1f1f1f  | --color-ecsess-black       |
+| #161917  | --color-ecsess-black-hover |
+
+### Typography
+
+- The website uses the Saira font family from Google Fonts:
+  - Saira: https://fonts.google.com/specimen/Saira
+
+- Instead of using TailwindCSS Typography plugin, we define our own typography styles in `src/app.css`, via `.typography` class.