# My Site — a personal page worth sharing (★)

Build a one-page personal site in a single `index.html` and put it online. It has my name, one sentence about me, three things I made, my links, and a small "Now" section that says what I am up to this month. It looks good on a phone, follows the phone's dark mode, and shows a proper preview card when I paste the link into a chat. It should look like a real person made it, not a template.

## Done looks like

- One `index.html` opens in a browser and shows: my name, one sentence about me, three things I made, a "Now" section with a date, and my links.
- Every word on the page is mine. Nothing is invented, nothing is placeholder text.
- On a phone it reads in one column with no sideways scrolling. On a laptop the text stays a comfortable width.
- It follows the system light or dark setting. A toggle button switches it, and the choice is remembered after reload.
- The browser tab shows a small icon I chose. Pasting the link into a chat app shows a title, a description and a picture.
- It is live at `<something>.pages.dev` and opens on my phone over mobile data.

## Constraints

- One file: `index.html` with inline `<style>` and a small inline `<script>` only for the theme toggle. Pictures go in an `img/` folder next to it.
- No frameworks, no build step, no webfonts. Use the system font stack.
- Pictures resized so each is under 300 KB.
- Before writing any content, ask me for: the name I want shown, one sentence about me, three things I made (title, one line, a link or a picture each), my links, and what I am doing now. Do not invent facts about me.
- Ask before adding a surname, school, town, age or a photo of my face. A first name or a nickname is fine.
- No tracking, no analytics, no cookies, no contact form, no email address in plain text.
- Publish with GitHub and Cloudflare Pages, following the guide chapters "Save it on GitHub" and "Put it online with Cloudflare Pages".
- Phone works: check on a real phone before calling it done.

## Milestones

1. **My words first.** Ask me the questions above. Build a plain page with my name, my sentence and the section headings, no styling yet.
   Check: the page opens in a browser and every word on it came from me.
2. **Three things I made.** Three cards, each with a title, one line and a link or picture. Resize pictures into `img/`. Cards sit side by side on a laptop and stack on a phone.
   Check: three cards with my real things; on a narrow window they stack in one column; each picture file is under 300 KB.
3. **Look and dark mode.** System fonts, one accent colour I pick, a readable line length, generous spacing. Light and dark colours via `prefers-color-scheme`, plus a toggle saved in localStorage.
   Check: switch the computer to dark mode and the page follows; press the toggle, reload, and the choice sticks.
4. **Now and links.** A "Now" section with a few lines and a "last updated" date. A list of my links with clear names.
   Check: click every link on the page; each one opens the right place.
5. **Ready to share.** A `<title>`, a meta description, Open Graph tags (title, description, image) and an SVG favicon.
   Check: the browser tab shows my icon and my name.
> The page is finished and works from the file on your computer. Publishing puts it at an address anyone can open.
6. **Publish.** Put the folder on GitHub and connect it to Cloudflare Pages (framework preset None, build command blank, output directory `/`).
   Check: the `.pages.dev` address opens on my phone over mobile data, and pasting it into a chat shows the preview card.

## Stretch

- A custom domain, if I have one (Pages project, then Custom domains).
- A "say hi" button that opens the contact app I prefer, instead of a form.
- A page for each of my three things with screenshots and the story of how I made it.
- A colour scheme generated from one colour I choose.
- A print stylesheet so the page prints as a one-page CV.

## Leave out

- Blogs, CMS tools, site builders, frameworks.
- Contact forms, comments, visitor counters, analytics.
- Stock photos and filler text.

Start by reading WRITING.md and the guide chapter on data if you need storage.