shaan-syed-site
Personal site for Shaan Syed. Next.js App Router, TypeScript, Tailwind
CSS v4. Fully static, no CMS, no database, no analytics.
Local development
npm install
npm run dev
Then open http://localhost:3000.
npm run build # production build, must pass clean before deploying
npm run start # serve the production build locally
npm run lint # eslint
npx tsc --noEmit # type check
Editing content
All content lives as typed objects in src/content/. Pages map over
that data, so nothing is hard-coded in JSX. Adding a job is a one-object
edit.
| File | Holds |
|---|
profile.ts | Name, subtitle, hero line, availability line, social links |
experience.ts | The Experience list on the home page |
projects.ts | The four project entries |
education.ts | Degrees, high school, the high school record, interests |
skills.ts | The two labelled skill runs |
awards.ts | Awards and honours |
certifications.ts | Completed and in-progress certifications |
bio.ts | The first-person paragraphs on /bio |
Copy rules
Site copy follows a strict style: no em dashes, no en dashes, no
exclamation points, and a banned vocabulary list. The audit is
automated. With the production server running:
npm run build && npm run start
node scripts/copy-audit.mjs
It exits non-zero if any hard rule is broken. Run it after editing copy.
Images
Every slot holds a real image: the home portrait, the four frames in the
/bio rail, the org logos, and a screenshot of riloai.app. To swap a
photo, overwrite the file and update the width and height next to it
in src/app/page.tsx or src/content/bio.ts, since Next uses those to
reserve the space. scripts/generate-placeholders.mjs still fills any
slot that goes missing.
Design
Two columns on the home page: identity on the left, a record of work on
the right as expandable rows. The projects page is a numbered index with
a detail panel. Colour tokens and their measured contrast ratios are at
the top of src/app/globals.css; --brass is text and stroke only,
because it fails contrast as a fill behind light text.
Regenerating assets
node scripts/fetch-logos.mjs # org logos from official sites
node scripts/generate-icons.mjs # brand icons from simple-icons
node scripts/shoot-project-sites.mjs # screenshot riloai.app
node scripts/generate-placeholders.mjs # fills any missing slot
node scripts/blacken-portrait-ground.mjs # portrait ground -> black
node scripts/build-favicon.mjs # tab and home-screen icons
The social card carries its own copies of the site's two faces, the
portrait and each project's mark, because Satori draws the card from
raw bytes and reads neither a next/font face nor a webp:
node --experimental-strip-types scripts/build-og-assets.mjs
