Evidence-Led Modern Portfolio Website — React and Responsive UI

# Project 03 — Modern Portfolio Website Demonstration

## English description

**Title:** Evidence-Led Modern Portfolio Website — React and Responsive UI

This project is a modern static React portfolio website built to present QA, data engineering, data science and automation work with inspectable evidence. The completed website follows an editorial design system named **Editorial Systems Notebook**, with a responsive layout, an asymmetric navigation index, accessible contact actions, and project panels that show actual QA and data artefacts rather than generic decorative imagery.

The package contains the source code, full-page and section screenshots, an implementation report and the selected design rationale. The report documents the executed local build, responsive behavior and accessibility considerations. It does not claim production traffic, conversion results or a formal accessibility certification.

**Skills demonstrated:** React, TypeScript, responsive CSS, Tailwind styling, information architecture, UI design system, evidence-driven portfolio presentation, accessibility-aware frontend implementation and build validation.

**Included files:** structured PDF report, full-page and cropped website screenshots, React source code, project configuration, design rationale and README.

## الوصف العربي

**العنوان:** موقع ملف أعمال حديث مبني على الأدلة — React وواجهة متجاوبة

هذا المشروع موقع ملف أعمال حديث وثابت مبني بـ React لعرض أعمال ضمان الجودة وهندسة البيانات وعلوم البيانات والأتمتة مع أدلة قابلة للفحص. يتبع الموقع نظام تصميم تحريري باسم **Editorial Systems Notebook**، ويضم تخطيطًا متجاوبًا، وفهرس تنقل غير متماثل، وإجراءات اتصال واضحة، ولوحات مشاريع تعرض أدلة حقيقية من اختبار الجودة والبيانات بدل الصور الزخرفية العامة.

يحتوي الملف على الكود المصدري ولقطات شاشة كاملة ولقطات للأقسام وتقرير تنفيذ ومنطق التصميم المختار. يوثق التقرير البناء المحلي المنفذ والسلوك المتجاوب واعتبارات إمكانية الوصول. ولا يدّعي وجود زيارات إنتاجية أو نتائج تحويل أو اعتماد رسمي لإمكانية الوصول.

**المهارات المعروضة:** React، TypeScript، CSS متجاوب، تنسيق Tailwind، هيكلة المعلومات، نظام تصميم للواجهة، عرض ملف أعمال قائم على الأدلة، تنفيذ واجهة يراعي إمكانية الوصول، والتحقق من البناء.

**محتويات الملف:** تقرير PDF منظم، لقطات شاشة كاملة ومقربة للموقع، كود React، تهيئة المشروع، منطق التصميم وREADME.