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