Mohammed Zaghloul — DevPlusCoder.com

Personal portfolio — 12+ years building web software, consulting, and shipping end-to-end products.

   

---

Features

• Work history — Visual timeline of experience and milestones
• Contact — Reach out via email or book a call
• Light & dark mode — Full design support for both themes
• Edge deployed — Runs on Cloudflare Workers, close to the user
• TypeScript end-to-end — Strict type checking across the full stack
• Mobile first — Designed for small screens, scales up cleanly

---

Tech stack

Category	Technology
Framework	TanStack Start
Language	TypeScript
Routing	TanStack Router
Styling	Tailwind CSS
Components	Shadcn UI
Build tool	Vite
Hosting	Cloudflare Workers
CI/CD	GitHub Actions
Testing	Vitest + React Testing Library
Monitoring	Cloudflare Analytics
Error tracking	Sentry
Env variables	t3-env

---

Project structure

portfolio/
├── public/                     # Static assets
│   └── images/
├── src/
│   ├── backend/                # Server-side logic
│   │   └── preferences/        # User preference mutations & queries
│   ├── core/                   # Shared, reusable primitives
│   │   ├── components/         # Generic UI components (Marquee, RiseReveal, …)
│   │   ├── hooks/              # Shared React hooks
│   │   ├── locales/            # i18n translation files (en, ar)
│   │   ├── theme/              # ThemeProvider, ThemeToggle, useTheme
│   │   └── utils/
│   ├── data/                   # Static data (work-history.json, …)
│   ├── features/
│   │   └── landing/
│   │       └── components/     # Page sections (Hero, About, WorkHistory, Contact, …)
│   ├── integrations/           # Third-party integration wrappers
│   │   ├── i18n/               # i18next setup & language toggle
│   │   ├── shadcn/             # Shadcn UI component overrides
│   │   ├── tanstack-form/      # Form field components & hooks
│   │   └── tanstack-query/     # Query client & devtools
│   ├── routes/                 # TanStack Router file-based routes
│   │   ├── __root.tsx
│   │   └── index.tsx
│   ├── router.tsx
│   ├── styles.css              # Global styles & theme tokens
│   └── env.client.ts           # Client-side env (t3-env)
├── docs/                       # Project documentation & specs
├── vite.config.ts
├── vitest.config.ts
├── wrangler.jsonc              # Cloudflare Workers config
└── tsconfig.json

---

Getting started

Prerequisites

• Node.js 20+
• pnpm 9+

Installation

git clone https://github.com/mohammedz/portfolio.git
cd portfolio
pnpm install
pnpm dev

The app runs at http://localhost:3000.

---

Scripts

Command	Description
pnpm dev	Start the development server
pnpm build	Build for production
pnpm test	Run tests with Vitest
pnpm lint	Lint with ESLint
pnpm format	Format with Prettier
pnpm check	Run lint, format, and type checks
pnpm typecheck	Run TypeScript type checking

---

Deployment

Deployed to Cloudflare Workers via GitHub Actions. Every push to main goes straight to production. Environment variables are managed with t3-env and GitHub Actions secrets.

---

License

MIT

---

Built by Mohammed Zaghloul