Samir Ajaj — Portfolio

A bilingual portfolio for clients and hiring teams, built with Next.js App Router, TypeScript, next-intl, shadcn/ui, and next-themes.

Development

Use pnpm:

pnpm install
pnpm dev

Open /en for English or /ar for Arabic. Arabic uses a right-to-left layout. The theme follows the visitor's system preference until they choose light or dark. Inter and Noto Sans Arabic are self-hosted through Fontsource.

Verification

pnpm typecheck
pnpm lint
pnpm build

Content and source files

• data.json: profile, SEO copy, projects, experience, and education.
• messages/en.json and messages/ar.json: localized section and interface copy.
• src/app/[locale]/: shared page and layout for both languages.
• src/components/ui/: shadcn/ui primitives.
• src/lib/assets.ts: runtime brand-image paths.
• src/app/globals.css: theme tokens, font imports, and essential base defaults.
• src/components/site-header.tsx: portrait badge and localized name, aligned with the navigation controls.

Project images stay in the content library even when their projects are not featured on the home page. Update the image path in data.json when renaming one.

Asset structure

public/
  brand/
    backgrounds/     # Light/dark hero backgrounds
    logos/           # Light/dark wordmarks and the portrait
    icons/           # 192px and 512px web-app icons
    social/          # Open Graph image and profile avatar
    pattern.svg      # Decorative brand pattern
  images/
    projects/        # Screenshots referenced by data.json
    education/       # University logos
    experience/      # Company and freelance logos

src/app/
  favicon.ico        # Branded browser favicon
  icon.svg           # Branded scalable icon
  apple-icon.png     # Branded Apple touch icon
  manifest.ts        # Web-app manifest
  robots.ts          # Crawler rules
  sitemap.ts         # English/Arabic sitemap

design/
  brand/             # Original artwork and alternate exports; not publicly served

Keep only runtime images in public. Use lowercase, hyphenated filenames. The hero uses the original portrait and pattern; the header pairs the 44px portrait badge with a 16px name from data.json in the active language. Next.js serves public/brand/... at /brand/... and public/images/... at /images/.... App icons use Next.js file-based metadata; do not duplicate their link tags in the locale layout. See the Next.js icon conventions.

SEO and deployment

Both locale pages are statically generated with localized titles, descriptions, canonical links, language alternates, social previews, and profile structured data. The app also generates /robots.txt, /sitemap.xml, and /manifest.webmanifest.

The configured public domain is https://www.samirajaj.me. If the deployment domain changes, update the URLs in the locale page/layout, sitemap, and robots files. Run pnpm build and pnpm start for a local production preview.