abizareyhandotcom

Source code for abizareyhan.com: a Finder-inspired portfolio where projects are organized like folders/files, with a preview pane and built-in search.

Features

• 3-pane Finder UI (Folders / Files / Preview) with responsive mobile flow
• Fuzzy search over project name + description, plus tag matching (Fuse.js)
• Deep links via URL hash (#<folder>/<fileId>) and session restore via sessionStorage
• Project previews with optional screenshots, tags, dates, and actions
• External-link confirmation dialog and image preview dialog
• SEO: OpenGraph/Twitter meta + sitemap and robots.txt generation
• Cloudflare Pages deployment via @cloudflare/next-on-pages + Wrangler

Tech Stack

• Next.js 14 (App Router) + React 18 + TypeScript
• Tailwind CSS + Framer Motion
• Fuse.js (search)
• Cloudflare Pages (@cloudflare/next-on-pages, wrangler)
• next-sitemap (sitemap + robots.txt)

Project Structure

• src/app/: App Router entry points (layout.tsx, page.tsx, globals.css)
• src/components/: Finder UI components (FolderList, FileList, FilePreview) and dialogs
• src/data/: Content sources (folders, projects, opportunity status messages)
• src/lib/: Context providers and helpers (SearchContext, DialogContext, getOpportunityStatus, types)
• public/: Icons, preview images, and generated SEO files (sitemap.xml, robots.txt)

Local Development

Prerequisites:

• Node.js 18.17+ (recommended: Node 20+)
• npm

Commands:

npm install
npm run dev

Open http://localhost:3000.

Scripts

• npm run dev: Next.js dev server (includes @cloudflare/next-on-pages/next-dev setup for local bindings)
• npm run build: production build (runs next-sitemap via postbuild)
• npm run start: run the Next.js Node server (not the Cloudflare Pages runtime)
• npm run lint: Next.js lint
• npm run pages:build: build for Cloudflare Pages via @cloudflare/next-on-pages (outputs to .vercel/output/static)
• npm run preview: Pages preview via Wrangler (wrangler pages dev)
• npm run deploy: deploy to Cloudflare Pages via Wrangler (wrangler pages deploy)
• npm run cf-typegen: generate CloudflareEnv types into env.d.ts

Lint

npm run lint

Formatting

Prettier is configured in .prettierrc (includes prettier-plugin-tailwindcss).

npx prettier -w .

Updating Content

About Section

• About dialog: src/components/dialogs/AboutDialog.tsx
• Opportunity status rotation logic: src/lib/getOpportunityStatus.ts
• Region/tone message sets: src/data/opportunityStatuses.ts

Folders

Edit src/data/folders.ts. Folder ids are used by projects to decide which "folder" they appear in.

Projects (Files)

Edit src/data/projects.ts. Each entry follows src/lib/types/file.ts:

• id: unique (used for hash deep links)
• name: display name
• iconPath: icon in public/ (example: /ic_file_kotlin.png)
• folder: array of folder ids (a file can be in multiple folders)
• metadata (optional): description, startDate, endDate, thumbnail, tags, url

Notes:

• Omit metadata.endDate to show Present.
• If metadata.url is set, the preview adds an Open action that uses the confirmation dialog.
• Thumbnails in public/ are referenced as /img_preview_*.avif. Remote thumbnails used with next/image must be added to images.remotePatterns in next.config.mjs.
• Deep links are hash-based: /#<folderId>/<fileId> (example: /#all-projects/gravel-android).

Cloudflare Pages

Wrangler config lives in wrangler.toml. This project uses @cloudflare/next-on-pages and deploys the generated output under .vercel/output/static.

# Build for Cloudflare Pages
npm run pages:build

# Preview the Pages runtime locally
npm run preview

# Deploy (Wrangler) - Never run this locally, its triggered by GitHub Actions
npm run deploy

Bindings and Type Generation

If you add Cloudflare bindings (KV/D1/R2/Queues/etc), configure them in wrangler.toml and regenerate types:

npm run cf-typegen

SEO and Analytics

• Page metadata and Google Analytics live in src/app/layout.tsx (see <GoogleAnalytics gaId="..."/>).
• next-sitemap runs after npm run build (via postbuild) and writes public/sitemap.xml and public/robots.txt.
• next-sitemap.config.js also injects selected blog post URLs from https://blog.abizareyhan.com.

Optional environment variables:

• SITE_URL: overrides siteUrl for sitemap generation (default: https://abizareyhan.com)