uveermaharaj.com

Personal portfolio for Uveer Maharaj — dark, minimal, technical. Built with Vite, React, TypeScript, Tailwind CSS, and Framer Motion.

Aesthetic: near-black canvas, monospace display type, restrained cosmic atmosphere (starfield + constellation lines). Content lives in src/data/content.ts.

---

Stack

Layer	Choice
Build	Vite 8
UI	React 19 + TypeScript
Styles	Tailwind CSS 4
Motion	Framer Motion
Hosting	GitHub Pages (+ custom domain)

---

Local development

# Install
npm install

# Dev server (hot reload)
npm run dev

# Production build → dist/
npm run build

# Preview production build
npm run preview

Edit copy, social links, projects, CV files, Cal.com link, and timeline in:

src/data/content.ts

Content quick reference

Feature	Where to edit
Projects	projects.items[] — title, description, tags, links, media (image / video / embed)
Project media files	public/projects/*
CV downloads	cv.files[] + PDFs in public/cv/
Cal.com booking	booking.calLink (e.g. your-user/30min)
About, expertise, path	Matching objects in content.ts

Example project media:

media: [
  { type: 'image', src: '/projects/my-shot.svg', alt: '…' },
  { type: 'video', src: '/projects/demo.mp4', poster: '/projects/poster.jpg' },
  { type: 'embed', src: 'https://www.youtube.com/embed/VIDEO_ID', title: 'Walkthrough' },
]

Cal.com loads only when the Book section approaches the viewport (no impact on starfield or initial JS). Theme is forced dark with CSS variables matching #0a0a0a / white / soft cosmic accents.

---

Project structure

src/
  components/     # Nav, Hero, Projects, CV, Booking, Starfield, …
  data/content.ts # All site copy and metadata
  App.tsx
  index.css       # Design tokens + Tailwind
public/
  CNAME
  favicon.svg
  projects/       # Project images / video assets
  cv/             # CV PDF downloads
.github/workflows/deploy.yml

---

Deploy to GitHub Pages

1. Create a public repository

On GitHub: New repository → public (e.g. uveermaharajdotcom or uveermaharaj.github.io).

2. Push the source

cd Chaos/uveermaharajdotcom
git init
git add .
git commit -m "Initial portfolio site"
git branch -M main
git remote add origin https://github.com/<your-username>/<repo-name>.git
git push -u origin main

3. Enable Pages (GitHub Actions)

1. Repo → Settings → Pages
2. Build and deployment → Source: GitHub Actions
3. Push (or re-run the workflow). The included workflow builds and deploys dist/.

Alternatively: set Source to Deploy from a branch, build locally (npm run build), and push dist to a gh-pages branch. The Actions path is recommended.

4. Custom domain

1. Ensure public/CNAME contains your domain (default: uveermaharaj.com). Vite copies it into dist/ on build.
2. Repo → Settings → Pages → Custom domain → enter uveermaharaj.com → Save.
3. Enable Enforce HTTPS once DNS has propagated (can take minutes to hours).

5. DNS at your registrar

For an apex domain (uveermaharaj.com), add A records pointing to GitHub Pages IPs:

Type	Name	Value
A	@	185.199.108.153
A	@	185.199.109.153
A	@	185.199.110.153
A	@	185.199.111.153

For www (optional but recommended):

Type	Name	Value
CNAME	www	<your-username>.github.io

Confirm current IPs in GitHub’s docs if they change.

If the site is a user/organization site (username.github.io), CNAME for www targets username.github.io. For a project site, the Pages URL is username.github.io/repo-name — custom domains still work with the same A/CNAME pattern; set base in vite.config.ts if you ever serve from a subpath without a custom domain (base: '/repo-name/').

6. Update the site later

# Edit content or code, then:
git add .
git commit -m "Update portfolio"
git push

The Actions workflow rebuilds and redeploys on every push to main / master.

---

Design notes

• Canvas #0a0a0a, surfaces #12141a / #1a1c20
• Text pure white + zinc muted tones
• Accent soft cosmic blue #7dd3fc and dusk purple #a78bfa — interactive / constellation only
• Type IBM Plex Mono (display + UI labels) + Inter (body)
• Starfield canvas particles; constellation lines near the cursor; respects prefers-reduced-motion

---

Further refinement

Once the base is live:

1. Real links — replace placeholder GitHub / LinkedIn / X URLs and email in content.ts.
2. Project proof — metrics for alarm rationalization, live demos, or case-study pages.
3. Headshot or mark — optional monochrome portrait or refined logo mark in the nav/hero.
4. Contact form — wire to Formspree, Resend, or a simple serverless endpoint.
5. OG image — 1200×630 social card for link previews.
6. Analytics — privacy-friendly (e.g. Plausible) if you want traffic signal without noise.
7. Geist Mono — if you prefer Vercel’s Geist, install geist and swap the mono stack in index.css / HTML.

---

License

Private / personal use unless you decide otherwise.