Welcome! This guide walks you through the task in plain language: branch, assets, your own page, link to home, then open a pull request.
The site lives in the frontend folder. It is an Astro project.
- Clone this repo to your computer.
- Open a terminal and go into the project folder.
- Install and run the site:
cd frontend
npm install
npm run dev- Open http://localhost:4321 in your browser. You should see the home page (do you like it haha)
Do not work directly on main. Make your own branch first.
Use your first name in lowercase. Use hyphens if you need spaces (for example linus-gao):
git checkout -b your-nameExample:
git checkout -b faiz-mPut all images you create in a folder named after you:
frontend/public/assets/your-name/
Examples:
frontend/public/assets/faiz/headshot.jpgfrontend/public/assets/faiz/banner.png
Use them on your page like this (note the path starts with /assets/):
<img src="/assets/your-name/headshot.jpg" alt="headshot" />Do not mix your files into someone else’s folder. One folder per person.
See frontend/public/assets/example/ for a sample folder and placeholder image.
You are building a brand-new page that is separate from the home screen. Name it after yourself, wire it up on the home page, then implement everything on that page.
-
Create your page file — copy the starter:
- From:
frontend/src/pages/example.astro - To:
frontend/src/pages/your-name.astro
(use your name, same as your branch — for examplefaiz.astro)
- From:
-
Link it from the home page — in
frontend/src/components/Welcome.astro, find theteamLinkslist and replace one placeholder with your name and path:{ label: 'Faiz', href: '/faiz' },
Save both files. On the home page, click your button — it should open your page at a new URL (for example
http://localhost:4321/faiz). That is the page you will implement. -
Build out your page — edit
your-name.astro:- Ensure I am able to click your name on home screen and it gets redirected to your super cool site!
- Change the title, layout, and content (this is your page to design).
- Point image paths to
/assets/your-name/...
cd frontend
npm run devCheck:
- Home page loads.
- Your page loads at
/your-name. - Images show up from
/assets/your-name/. - Links between home and your page work both ways.
Commit a little as you go — a small commit each day is better than one big dump at the end. That way your progress is saved on GitHub and we can check in on your work as you build.
When you have something worth saving locally:
git add .
git commit -m "Add my onboarding page and assets"Push your branch so it shows up on GitHub (do this regularly, not only at the deadline):
git push -u origin your-nameWhen you are ready for review, open a pull request:
- Click Compare & pull request (or New pull request).
- Base branch:
main. Compare branch: your branch. - Describe what you added (page, images, links).
- Click Create pull request.
- Ping Faiz on Discord and make sure to update your task on Notion!
Ask for a review when you are done. Do not merge your own PR......... if you do................... big oh no.......
- Branch created with your name
- Folder
frontend/public/assets/your-name/with your images - Page
frontend/src/pages/your-name.astrocreated - Home links to your page
- Tested with
npm run dev - Pull request opened against
main
- Dev server issues: run commands inside
frontendand runnpm installfirst. - Image not showing: check the file is under
public/assets/your-name/and the path in HTML is/assets/your-name/filename. - Page not found: the file must be
src/pages/your-name.astro(same spelling as the URL).