Personal Portfolio
Bilingual Site with Built-in CMS
This website: an English/Arabic portfolio with project case studies, a contact inquiry form and a full admin dashboard that edits every section, running on Cloudflare Workers.
mohamedselim.dev
- Status
- Completed
- Role
- Full-Stack Developer (design, development & deployment)
- Client
- Personal project
- Year
- 2026
- Project type
- Web Apps
Overview
Overview
My own portfolio, built as a real product instead of a static page: every text, image, project and setting on the site is editable from a private dashboard, in both English and Arabic.
The Challenge
I wanted to update projects, services and contact details without touching code or redeploying, keep one codebase for two languages with a proper right-to-left layout, and host it without a traditional server or paid database.
The Solution
A Next.js 16 app deployed to Cloudflare Workers. Content lives in Cloudflare D1 and uploaded images in R2. The dashboard is generated from one declarative schema, so every section shares the same forms, validation, publish/draft, reordering and search. Translations come from shared files, and the language is part of the URL. The admin area is protected by a signed session cookie and a PBKDF2 password hash, with server-side validation and rate limiting on login and on the inquiry form.
Key Features
- English and Arabic with a true RTL layout from shared translation files
- Home, About, Projects, case study, Services and Contact pages
- Project filters and screenshot gallery with lightbox
- Project inquiry form with client and server validation
- Admin dashboard for every section of the site
- Publish / draft, reorder, search and filter on every list
- Media library with image uploads to Cloudflare R2
- Inquiries inbox with read / replied / archived states
- Privacy-friendly visitor analytics with no third parties
- SEO: metadata, hreflang, sitemap, generated share image
- Theme colours and maintenance mode editable from the dashboard
- Unknown data (stats, testimonials) stays hidden until filled in
Project Screenshots
A closer look at the product and its key screens.
Tech Stack
Technologies used to build this project.
- Next.js
- React
- TypeScript
- Tailwind CSS
- Cloudflare Workers
- Cloudflare D1
- Cloudflare R2
Project Details
Key information about this project.
- Status
- Completed
- Role
- Full-Stack Developer (design, development & deployment)
- Client
- Personal project
- Year
- 2026
- Project type
- Web Apps
- Links
- mohamedselim.dev
My Responsibilities
Key areas I was responsible for.
- UI design and responsive RTL/LTR implementation
- Frontend and backend development
- Content model and dashboard built from one schema
- Authentication, validation and rate limiting
- Data layer on Cloudflare D1 and R2
- Deployment to Cloudflare Workers
Next project